/*
Lapland Fox Tours - Identidad Corporativa
Adaptación visual del theme Roavio (Webtend) para EYWA Technology SAS
No se modifica la tipografía del theme (Inter Tight), solo color e imágenes.
*/
:root {
  --theme: #14a091;
  --theme-2: #14a091;
  --lft-dark: #009689;
  --lft-dark-2: #0e4547;
}

/* ==== Página de detalle de tour (detalle-tour.php) ==== */
.lft-tour-gallery-section {
  padding: 60px 0 0;
}
.lft-tour-gallery-section .gallery-image {
  display: block;
  height: 280px;
}
.lft-tour-gallery-section .gallery-image img {
  height: 100%;
  object-fit: cover;
}

.lft-tour-details-section {
  padding: 70px 0 100px;
}
.lft-tour-main h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--header);
  margin: 40px 0 16px;
}
.lft-tour-main h3:first-child {
  margin-top: 0;
}
.lft-tour-main p {
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.8;
}

/* Acordeón (Itinerary + Tour Details) */
.lft-accordion-item {
  border-bottom: 1px solid var(--border);
}
.lft-accordion-item:first-child {
  border-top: 1px solid var(--border);
}
.lft-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #026c63b5;
  border: none;
  text-align: left;
  padding: 20px 0px 20px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 10px;
}
.lft-accordion-btn i.fa-chevron-down {
  transition: transform 0.3s ease;
  color: var(--theme);
  flex-shrink: 0;
}
.lft-accordion-btn[aria-expanded="true"] i.fa-chevron-down {
  transform: rotate(180deg);
}
.lft-accordion-body {
  padding: 0 4px 24px;
}
.lft-accordion-body p {
  margin: 0;
  color: var(--text);
  line-height: 1.8;
}
.lft-accordion .list-2 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lft-accordion .list-2 li {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text);
  line-height: 1.7;
}
.lft-accordion .list-2 li i {
  color: var(--theme);
  margin-top: 5px;
  flex-shrink: 0;
}

/* Variante +/- para el acordeón de Tour Details */
.lft-accordion-plus .lft-accordion-btn span {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.lft-plus {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.lft-plus::before,
.lft-plus::after {
  content: "";
  position: absolute;
  background-color: var(--theme);
  transition: transform 0.3s ease;
}
.lft-plus::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.lft-plus::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}
.lft-accordion-btn[aria-expanded="true"] .lft-plus::after {
  transform: translateX(-50%) scaleY(0);
}

/* Sidebar del tour */
.lft-tour-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
}
.lft-sidebar-box {
  background-color: var(--bg);
  border-radius: 12px;
  padding: 24px 26px;
}
.lft-sidebar-box h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--theme);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.lft-sidebar-box p {
  margin: 0;
  color: var(--header);
  font-weight: 600;
}
.lft-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  gap: 12px;
}
.lft-price-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.lft-price-row b {
  color: var(--theme);
  font-size: 17px;
  white-space: nowrap;
}
.lft-tour-form .form-clt {
  margin-bottom: 16px;
}
.lft-tour-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--header);
  margin-bottom: 6px;
}
.lft-tour-form input,
.lft-tour-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  background-color: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color 0.3s ease-in-out;
  font-family: inherit;
}
.lft-tour-form input:focus,
.lft-tour-form textarea:focus {
  border-color: var(--theme);
}
.lft-tour-form textarea {
  resize: vertical;
}
.lft-tour-form button.theme-btn {
  background-color: #0A3B45;
  justify-content: center;
  transition: background-color 0.35s ease-in-out;
}
.lft-tour-form button.theme-btn::after {
  display: none;
}
.lft-tour-form button.theme-btn:hover {
  background-color: #FE970F !important;
}
.lft-sidebar-help {
  background-color: var(--lft-dark);
  border-radius: 12px;
  padding: 24px 26px;
  text-align: center;
}
.lft-sidebar-help h5 {
  color: var(--white);
  font-weight: 600;
  margin-bottom: 14px;
}
.lft-sidebar-help .theme-btn {
  justify-content: center;
}
@media (max-width: 991px) {
  .lft-tour-sidebar {
    position: static;
    margin-top: 40px;
  }
}

/* Evita que el navegador inicie un arrastre nativo (drag) sobre imágenes,
   que es lo que dejaba la página bloqueada al hacer clic sostenido y mover
   el mouse sobre fotos, sliders y tarjetas. */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
}

/* ==== Breadcrumb / encabezado de páginas internas ==== */
.lft-breadcrumb-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}
.lft-breadcrumb-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 55%);
  z-index: 0;
}
.lft-breadcrumb-section .container {
  position: relative;
  z-index: 1;
}
.lft-breadcrumb-content h1 {
  font-weight: 700;
  margin-bottom: 18px;
  font-size: 48px;
  text-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}
.lft-breadcrumb-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 16px;
  text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
}
.lft-breadcrumb-list a {
  color: var(--white);
}
.lft-breadcrumb-list span {
  color: rgba(255, 255, 255, 0.6);
}
.lft-breadcrumb-list a.current,
.lft-breadcrumb-list span.current {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 575px) {
  .lft-breadcrumb-section {
    padding: 65px 0;
  }
}

/* ==== Send Message confirmation (message-sent.php) ==== */
.lft-message-sent-section {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.lft-message-sent-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 65%) 100%);
  z-index: 0;
}
.lft-message-sent-section .container {
  position: relative;
  z-index: 1;
}
.lft-message-sent-content h1 {
  font-weight: 700;
  font-size: 48px;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}
.lft-message-sent-icon {
  margin-top: 30px;
}
.lft-message-sent-content .theme-btn {
  margin-top: 34px;
}
@media (max-width: 575px) {
  .lft-message-sent-section {
    min-height: 480px;
  }
  .lft-message-sent-content h1 {
    font-size: 32px;
  }
}

/* ==== Grid de tours (Winter/Summer/Autumn Experiences) ==== */
.lft-tours-grid-section {
  padding: 100px 0;
}
.lft-tour-card {
  background-color: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}
.lft-tour-card .lft-tour-img {
  display: block;
  overflow: hidden;
}
.lft-tour-card .lft-tour-img img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.lft-tour-card:hover .lft-tour-img img {
  transform: scale(1.08);
}
.lft-tour-card .lft-tour-content {
  padding: 24px 26px 30px;
  text-align: center;
}
.lft-tour-card .lft-tour-content h5 {
  font-weight: 600;
  margin-bottom: 18px;
}
.lft-tour-card .lft-tour-content h5 a {
  color: var(--header);
  transition: color 0.3s ease-in-out;
}
.lft-tour-card .lft-tour-content h5 a:hover {
  color: var(--theme);
}

/* ==== Hero / Banner: altura y posición vertical del texto ==== */
.hero-1 {
  min-height: 650px;
  display: flex;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 40px;
}
.hero-1 .row {
  width: 100%;
}
@media (max-width: 1399px) {
  .hero-1 {
    min-height: 560px;
    padding-top: 115px;
  }
}
@media (max-width: 991px) {
  .hero-1 {
    min-height: 480px;
    padding-top: 105px;
  }
}
@media (max-width: 575px) {
  .hero-1 {
    min-height: 420px;
    padding-top: 95px;
    padding-bottom: 30px;
  }
}
/* Texto corrido hacia la derecha (como en el diseño), lejos de la flecha del slider */
.hero-1 .container-fluid {
  padding-left: clamp(90px, 15vw, 320px);
}
@media (max-width: 575px) {
  .hero-1 .container-fluid {
    padding-left: 55px;
    padding-right: 55px;
  }
}
/* Ubicación de texto = Centro/Derecha (administrar/banner.php): el padding-left
   fijo de arriba es exclusivo del diseño "Izquierda" (aleja el texto de la
   flecha del slider) — para Centro/Derecha rompe el centrado/alineación real,
   así que se iguala al padding-right nativo de Bootstrap. */
.hero-1.hero-1--centro .container-fluid,
.hero-1.hero-1--derecha .container-fluid {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
/* Banner sin texto ni botón visibles (administrar/banner.php): el degradado
   oscuro de legibilidad existe únicamente para proteger ese contenido — sin
   nada que proteger, se apaga y el video/imagen se ve a su brillo real. */
.hero-1 .hero-bg--sin-texto::before {
  content: none;
}

/* ==== Hero / Banner (flechas prev-next) ==== */
.hero-arrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 5;
  pointer-events: none;
}
.hero-arrow .hero-button-prev,
.hero-arrow .hero-button-next {
  pointer-events: all;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.hero-arrow .hero-button-prev:hover,
.hero-arrow .hero-button-next:hover {
  background-color: var(--theme);
  border-color: var(--theme);
}
@media (max-width: 767px) {
  .hero-arrow {
    padding: 0 15px;
  }
  .hero-arrow .hero-button-prev,
  .hero-arrow .hero-button-next {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }
}

/* ==== Hero / Banner en modo video ==== */
.hero-video-bg {
  background-color: #0b1f1e;
  pointer-events: none;
}
.hero-video-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78%;
  transform: translate(-50%, -50%);
  /* El degradado oscuro de legibilidad (.hero-bg::before) vive en z-index:-1
     dentro de este mismo contenedor; el iframe (un hijo real, no un fondo
     CSS) pinta por encima de eso si no se le fija un z-index más bajo aún.
     El preloader (más abajo) necesita quedar entre los dos: por eso el
     video baja hasta -3. */
  z-index: -3;
}
.hero-video-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}
.hero-video-preloader {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 1;
  transition: opacity 1s ease;
}
.hero-video-preloader--oculto {
  opacity: 0;
}
/* El degradado estático no siempre alcanza contra un video en movimiento con
   tramos claros (nieve, cielo de día, etc.): además del degradado, el texto
   sobre un banner de video lleva su propia sombra. */
.hero-1:has(.hero-video-bg) .hero-content h1,
.hero-1:has(.hero-video-bg) .hero-content p {
  text-shadow: 0 2px 12px rgb(0 0 0 / 55%), 0 0 30px rgb(0 0 0 / 35%);
}

/* ==== Header top bar / nav en color corporativo ==== */
.header-top-section {
  background-color: var(--lft-dark);
}
header.header-1 {
  background-color: var(--lft-dark);
}
header.header-1.sticky-header {
  background-color: var(--lft-dark);
}
/* El theme le pone fondo blanco al container-fluid interno del header,
   lo que tapaba el fondo oscuro y volvía invisibles el logo y el botón
   de hamburguesa (blancos) en móvil/tablet. */
.header-1 .container-fluid {
  background-color: #ffffff;
}
.header-main .main-menu ul li a {
  color: var(--white);
}
.header-main .main-menu ul li a:hover {
  color: #6fe4d4 !important;
}
.header-main .main-menu ul li.active > a {
  color: var(--theme) !important;
}
.header-main .main-menu ul li .submenu li a {
  color: var(--header);
}
.header-main .sidebar__toggle {
  color: var(--white) !important;
}

/* Menú centrado entre el logo y el botón de WhatsApp */
.header-main .header-left {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.header-main .header-left .mean__menu-wrapper {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.header-main .header-left .mean__menu-wrapper .main-menu {
  width: auto;
}
@media (max-width: 1199px) {
  .header-main .header-left .mean__menu-wrapper {
    display: none;
  }
}

/* Botón de WhatsApp en el header: icono a su tamaño real, sin deformar */
.theme-btn.newcolor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.35s ease-in-out;
}
/* El efecto círculo del theme no cubre bien un botón ancho y bajo como este:
   se desactiva y se usa una transición de color completa en su lugar. */
.theme-btn.newcolor::after {
  display: none;
}
.theme-btn.newcolor:hover {
  background-color:#FE970F!important;
}
.theme-btn.newcolor img {
  width: 18px;
  height: 18px;
  min-width: 18px;
  object-fit: contain;
  display: inline-block;
}

/* ==== Topbar (franja superior) ==== */
.header-top-wrapper .lft-topbar-list {
  display: flex;
  align-items: center;
  gap: 30px;
}
.header-top-wrapper .lft-topbar-list li {
  font-size: 14px;
  font-weight: 400;
}
.header-top-wrapper .lft-topbar-list li a {
  color: var(--white);
}
.header-top-wrapper .lft-topbar-list li i {
  color: var(--theme);
  margin-right: 6px;
}

/* ==== Botón "Design Your Trip" (a la izquierda de las redes sociales) ==== */
.lft-design-trip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 22px;
  background-color: #ffffff;
  color: #000000;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}
.lft-design-trip-btn:hover {
  background-color: #FD9611;
  color: #ffffff;
}

/* ==== Iconos redondos de redes sociales (topbar, footer, offcanvas) ==== */
.social-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.social-icon a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}
.social-icon a:hover {
  color: var(--white);
}
.header-top-wrapper .header-right .social-icon a {
  width: 30px;
  height: 30px;
  font-size: 20px;
}

/* ==== Selector de idioma ==== */
.lang-switch {
  gap: 12px;
  margin-left: 25px;
}
.lang-switch .lang-flag {
  display: inline-flex;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0.55;
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.lang-switch .lang-flag:hover,
.lang-switch .lang-flag.active {
  opacity: 1;
  border-color: var(--theme);
}
.lang-switch .lang-flag img {
  width: 40px;
  height: 25px;
  object-fit: cover;
  display: block;
}

/* Google Translate se usa solo como motor de traducción (ver
   assets/js/idioma-selector.js) — su propio widget, banner superior, tooltip
   de traducción y resaltado de texto se ocultan por completo para que el
   usuario solo vea las banderas propias del header.
   html body antepuesto a propósito: sube la especificidad por encima de
   cualquier <style> que Google inyecte dinámicamente con la misma !important. */
html body #google_translate_element,
html body .goog-te-banner-frame,
html body .goog-te-balloon-frame,
html body #goog-gt-tt,
html body .goog-tooltip,
html body .goog-tooltip:hover,
html body .goog-text-highlight,
html body iframe.goog-te-banner-frame,
html body iframe.skiptranslate {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Google Translate fija esto por JS en línea cuando muestra su banner
   superior, empujando todo el contenido hacia abajo; se neutraliza acá ya
   que el banner en sí está oculto arriba. */
html body {
  top: 0 !important;
}

/* ==== Hero banner 100% ancho (sin overlap de header fijo) ==== */
.hero-section-1 {
  margin: 0 !important;
  border-radius: 0 !important;
}
.hero-section-1 .hero-1::before,
.hero-1 .hero-bg::before {
  border-radius: 0 !important;
}

/* ==== Why Choose Lapland Fox Tours (3 cajas) ==== */
.lft-why-choose-section {
  position: relative;
  padding: 60px 0 20px 0;
  overflow: hidden;
}
.lft-why-choose-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background-color: var(--theme);
  z-index: 0;
}
.lft-why-choose-section .container {
  position: relative;
  z-index: 1;
}
.lft-why-choose-section .section-title {
  margin-bottom: 50px;
}
.lft-why-choose-section .section-title h2 {
  color: var(--header);
}
.lft-why-card {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}
.lft-why-card .lft-why-img {
  display: block;
  overflow: hidden;
}
.lft-why-card .lft-why-img img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.lft-why-card:hover .lft-why-img img {
  transform: scale(1.08);
}
.lft-why-card .lft-why-content {
  padding: 24px 26px 30px;
}
.lft-why-card .lft-why-content h5 {
  font-weight: 600;
  margin-bottom: 10px;
}
.lft-why-card .lft-why-content h5 a {
  color: #ffffff;
  transition: color 0.3s ease-in-out;
}
.lft-why-card .lft-why-content h5 a:hover {
  color: var(--lft-dark);
}
.lft-why-card .lft-why-content p {
  color: #ffffff;
  font-size: 18px;
  margin: 0;
}
.lft-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 45px 0 55px;
  position: relative;
  z-index: 1;
}
.lft-dots span,
.lft-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin: 0 !important;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.lft-dots span.active,
.lft-dots .swiper-pagination-bullet-active {
  background-color: var(--white);
  width: 24px;
  border-radius: 5px;
}
.lft-why-slider {
  padding-bottom: 10px;
}
.lft-why-slider .swiper-slide {
  height: auto;
}

/* ==== Explore Lapland In Every Season ==== */
.lft-explore-section {
  background-color: var(--bg);
  padding: 100px 0;
}
.lft-season-slider {
  padding-bottom: 10px;
}
.lft-season-slider .swiper-slide {
  height: auto;
}
/* Fondo claro de la sección: los puntos necesitan color oscuro, no blanco */
.lft-season-dots span,
.lft-season-dots .swiper-pagination-bullet {
  background-color: rgba(11, 59, 61, 0.25);
}
.lft-season-dots span.active,
.lft-season-dots .swiper-pagination-bullet-active {
  background-color: var(--lft-dark);
}
.lft-season-card {
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}
.lft-season-card .lft-season-img {
  display: block;
  overflow: hidden;
}
.lft-season-card .lft-season-img img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.lft-season-card:hover .lft-season-img img {
  transform: scale(1.08);
}
.lft-season-card .lft-season-content {
  padding: 24px 26px 28px;
}
.lft-season-card .lft-season-content h5 {
  font-weight: 600;
  margin-bottom: 10px;
}
.lft-season-card .lft-season-content h5 a {
  color: var(--header);
  transition: color 0.3s ease-in-out;
}
.lft-season-card .lft-season-content h5 a:hover {
  color: var(--theme);
}
.lft-season-card .lft-season-content p {
  color: var(--text);
  font-size: 18px;
  margin-bottom: 20px;
  min-height: 66px;
}
.lft-season-card .lft-season-content .theme-btn {
  padding: 14px 40px;
    font-size: 18px;
}

/* ==== What Our Customers Say - imágenes ==== */
.lft-testimonial-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lft-testimonial-gallery .lft-tg-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.lft-testimonial-gallery .lft-tg-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.35s ease-in-out;
  z-index: 1;
}
.lft-testimonial-gallery .lft-tg-video:hover::before {
  background-color: rgba(0, 0, 0, 0.35);
}
.lft-testimonial-gallery .lft-tg-item img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  display: block;
}
.lft-testimonial-gallery .lft-tg-video img {
  transition: transform 0.6s ease;
}
.lft-testimonial-gallery .lft-tg-video:hover img {
  transform: scale(1.08);
}
.lft-testimonial-gallery .lft-tg-item .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--theme);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 2;
  transition: transform 0.35s ease-in-out, background-color 0.35s ease-in-out;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}
.lft-testimonial-gallery .lft-tg-video:hover .video-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background-color: var(--lft-dark);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.15);
}
.testimonial-content .content .icon i {
  color: var(--theme);
}
.testimonial-content .content .client-image img {
  border-radius: 50%;
  width: 54px;
  height: 54px;
  object-fit: cover;
}

/* ==== Gallery (home) ==== */
.lft-gallery-section {
  padding: 100px 0;
}
.lft-gallery-wide {
  max-width: 98%;
  width: 98%;
}
.lft-gallery-section .gallery-image {
  display: block;
  height: 350px;
}
.lft-gallery-section .gallery-image img {
  height: 100%;
  object-fit: cover;
}
.lft-gallery-more {
  text-align: center;
  margin-top: 20px;
}

/* ==== About Us (teaser home) ==== */
.lft-about-section {
  padding: 100px 0;
  overflow: hidden;
}
.lft-about-section .lft-about-image img {
  width: 100%;
  border-radius: 12px;
}
.lft-about-section .section-title h2 {
  color: var(--header);
  margin-bottom: 16px;
}
.lft-about-section .lft-about-text {
  color: #222222;
  margin-bottom: 26px;
}
.lft-about-features {
  display: flex;
  gap: 40px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  margin-bottom: 30px;
}
.lft-about-features .lft-feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.lft-about-features .lft-feature-item h6 {
  color: var(--header);
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 16px;
}
.lft-about-features .lft-feature-item p {
  color: var(--text);
  font-size: 16px;
  margin: 0;
}

/* ==== What Our Customers Say ==== */
.lft-testimonial-section {
  background-color: #003747;
}

/* ==== Footer ==== */
.lft-footer {
  background-color: var(--lft-dark);
  position: relative;
  z-index: 1;
}
.lft-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(11, 59, 61, 0.87);
  z-index: 0;
}
.lft-footer > .container,
.lft-footer .footer-bottom {
  position: relative;
  z-index: 1;
}
.lft-footer .footer-widget-wrapper .single-footer-widget .wid-title h4 {
  color: var(--theme);
}
.lft-footer-logo {
  max-width: 100%;
}
.lft-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lft-footer-brand .footer-content .social-icon {
  justify-content: center;
}
.lft-footer .footer-bottom.style-1 {
  margin-bottom: 0 !important;
  border-bottom: none;
  padding: 22px 0;
}
.lft-footer-wrapper,
.lft-copyright {
  justify-content: center !important;
}
.lft-footer-wrapper p,
.lft-copyright p {
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  margin: 0;
}
.lft-footer-wrapper p a,
.lft-copyright p a {
  color: var(--white);
  font-weight: 600;
}
.lft-footer-wrapper p a:hover,
.lft-copyright p a:hover {
  color: var(--theme);
}
/* Foto de fondo del footer con overlay oscuro corporativo */
.lft-footer.bg-cover {
  position: relative;
  background-color: var(--lft-dark);
}
.lft-footer.bg-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(11 59 61 / 80%) 0%, rgb(11 59 61 / 77%) 100%);
  z-index: 0;
}
.lft-footer.bg-cover > .container,
.lft-footer.bg-cover .footer-bottom {
  position: relative;
  z-index: 1;
}

/* ==== Botón secundario oscuro (theme-btn dark) ==== */
.theme-btn.dark {
  background-color: var(--lft-dark-2);
}
.theme-btn.dark::before {
  background-color: var(--theme);
}

/* ==== Ready To Experience - CTA Parallax ==== */
.lft-cta-parallax {
  position: relative;
  padding: 140px 0;
  background-attachment: fixed;
  overflow: hidden;
}
.lft-cta-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 12, 0.45) 0%, rgba(15, 15, 12, 0.65) 100%);
  z-index: 0;
}
.lft-cta-parallax.bg-cover {
  background-position: left center;
}
.lft-cta-parallax .container {
  position: relative;
  z-index: 1;
}
.lft-cta-content {
  margin: 0 auto;
}
.lft-cta-content h2 {
  margin-bottom: 55px;
}
.lft-cta-content p {
  opacity: 0.9;
  margin-bottom: 35px;
  font-size: 23px;
  line-height: 1.7;
}
.lft-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.lft-parallax-label {
  position: absolute;
  right: -38px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 4px;
  font-size: 13px;
  font-weight: 600;
  z-index: 1;
}
@media (max-width: 991px) {
  .lft-cta-parallax {
    background-attachment: scroll;
    padding: 90px 0;
  }
  .lft-cta-buttons {
    flex-wrap: wrap;
  }
}

/* ==== Botón volver arriba ==== */
#back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #FE920C;
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
#back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#back-top:hover {
  background-color: var(--lft-dark);
}

/* ==== Widget flotante de WhatsApp (popup de chat simulado) ==== */
.whatsapp-widget {
  --whatsapp-widget-acento: var(--theme);
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1050;
}
.whatsapp-widget__boton {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  border: none;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.whatsapp-widget__boton--imagen {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.whatsapp-widget__boton--imagen img {
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .3));
}
/* El botón con imagen propia es más alto que el círculo de 60px por defecto:
   el popup sube para no quedar tapado por el botón. */
.whatsapp-widget:has(.whatsapp-widget__boton--imagen) .whatsapp-widget__popup {
  bottom: 170px;
}
@media (max-width: 575px) {
  .whatsapp-widget:has(.whatsapp-widget__boton--imagen) .whatsapp-widget__popup {
    bottom: 170px;
  }
}
.whatsapp-widget__popup {
  display: none;
  position: absolute;
  bottom: 76px;
  left: 0;
  width: 320px;
  max-width: 88vw;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  background: #fff;
}
.whatsapp-widget__popup--abierto {
  display: block;
}
.whatsapp-widget__header {
  background: var(--lft-dark);
  border-bottom: 3px solid var(--whatsapp-widget-acento);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.whatsapp-widget__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--whatsapp-widget-acento);
  object-fit: cover;
}
.whatsapp-widget__info {
  flex: 1;
  color: #fff;
  font-size: .85rem;
}
.whatsapp-widget__estado {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: #cfcfcf;
}
.whatsapp-widget__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
}
.whatsapp-widget__cerrar {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.whatsapp-widget__cuerpo {
  background: #f4efe6;
  background-image: radial-gradient(#e3ddce 1px, transparent 1px);
  background-size: 14px 14px;
  padding: 16px;
}
.whatsapp-widget__burbuja {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .85rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.whatsapp-widget__remitente {
  display: block;
  color: var(--whatsapp-widget-acento);
  font-size: .75rem;
  margin-bottom: 2px;
}
.whatsapp-widget__form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #eee;
}
.whatsapp-widget__input,
.whatsapp-widget__input:focus {
  flex: 1;
  border: 1px solid var(--whatsapp-widget-acento);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: .85rem;
  /* main.css fija "input, input:focus { color: white }" de fábrica; se
     sobreescribe aquí (incluido :focus) o el texto tecleado queda invisible. */
  color: var(--text);
}
.whatsapp-widget__enviar {
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: .8rem;
  font-weight: 700;
}

/* ==== Design Your Trip (design-your-trip.php) ==== */
.lft-dyt-intro-section {
  padding: 100px 0;
}
.lft-dyt-form-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--header);
  margin: 0 0 40px;
}
.lft-dyt-form-box {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--theme);
  border-radius: 16px;
  padding: 50px 60px;
}
.lft-dyt-heading {
  text-align: center;
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 26px;
}
.lft-dyt-form h4.lft-dyt-heading:not(:first-child) {
  margin-top: 44px;
}
.lft-dyt-form .form-clt {
  margin-bottom: 0;
}
.lft-dyt-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.lft-dyt-form input:not([type="checkbox"]),
.lft-dyt-form select,
.lft-dyt-form textarea {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  background-color: var(--white);
  color: var(--text);
  outline: none;
  font-family: inherit;
  appearance: none;
}
.lft-dyt-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230A3B45' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 36px;
  cursor: pointer;
}
/* main.js llama $('select').niceSelect() sobre todo el sitio: el <select>
   real queda oculto y el plugin inserta un .nice-select al lado, así que
   el estilo visible que hay que igualar al diseño es el de .nice-select. */
.lft-dyt-form .nice-select {
  width: 100%;
  height: auto;
  min-height: 0;
  border: none;
  border-radius: 8px;
  padding: 14px 40px 14px 16px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  color: var(--text);
  background-color: var(--white);
  line-height: normal;
}
.lft-dyt-form .nice-select::after {
  right: 18px;
  border-color: #0A3B45;
}
.lft-dyt-form .nice-select .list {
  width: 100%;
  border-radius: 8px;
  z-index: 20;
}
.lft-dyt-form .nice-select .option {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}
.lft-dyt-textarea {
  margin-top: 26px;
}
.lft-dyt-form textarea {
  resize: vertical;
}
.lft-dyt-checks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 20px;
}
.lft-dyt-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 15px;
  cursor: pointer;
}
.lft-dyt-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  accent-color: #0A3B45;
  cursor: pointer;
  margin-right: 5px;
}
.lft-dyt-submit {
  margin-top: 36px;
}

/* ==== Checkbox "Terms and Conditions" (aside de tour + Design Your Trip) ==== */
.lft-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 18px;
  cursor: pointer;
}
.lft-terms-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  cursor: pointer;
}
.lft-tour-form .lft-terms-check {
  color: var(--text);
}
.lft-tour-form .lft-terms-check input[type="checkbox"] {
  accent-color: var(--theme);
}

/* ==== About Us (about-us.php) ==== */
.lft-about-intro-section {
  padding: 80px 0 100px 20px;
}
.lft-about-intro-row-2 {
  margin-top: 15px;
}
.lft-about-intro-content h2 {
  font-size: 43px;
  font-weight: 700;
  color: var(--header);
  margin-bottom: 20px;
}
.lft-about-intro-content p {
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 18px;
}
.lft-about-intro-content p:last-child {
  margin-bottom: 0;
}
.lft-about-intro-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
}

.lft-about-intro-image2 img {
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 767px) {
  .lft-about-intro-image img {
    height: 280px;
  }
  .lft-about-intro-row-2 {
    margin-top: 20px;
  }
}

.lft-values-section {
  background-color: var(--theme);
  padding: 80px 0;
}
.lft-values-section .section-title {
  margin-bottom: 50px;
}
.lft-value-box {
  background-color: var(--white);
  border-radius: 12px;
  padding: 34px 24px;
  text-align: center;
  height: 100%;
}
.lft-value-box .icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
}
.lft-value-box .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lft-value-box h5 {
  font-weight: 700;
  color: var(--header);
  margin-bottom: 10px;
}
.lft-value-box p {
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.lft-why-travel-section {
  background-color: #0A3B45;
  padding: 80px 0;
}
.lft-why-travel-section .section-title {
  margin-bottom: 50px;
}
.lft-why-travel-box {
  background-color: var(--white);
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
  height: 100%;
}
.lft-why-travel-box .icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
}
.lft-why-travel-box .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lft-why-travel-box h5 {
  font-weight: 700;
  color: var(--theme);
  font-size: 20px;
  margin-bottom: 8px;
}
.lft-why-travel-box p {
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.lft-foxy-section {
  padding: 100px 0;
}
.lft-tour-form .lft-terms-check a {
  color: var(--theme);
  text-decoration: underline;
}
.lft-dyt-form .lft-terms-check {
  color: var(--white);
  margin-top: 30px;
}
.lft-dyt-form .lft-terms-check input[type="checkbox"] {
  accent-color: #0A3B45;
}
.lft-dyt-form .lft-terms-check a {
  color: var(--white);
  text-decoration: underline;
}
@media (max-width: 991px) {
  .lft-dyt-form-box {
    padding: 40px 30px;
  }
  .lft-dyt-checks {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .lft-dyt-form-box {
    padding: 32px 20px;
  }
  .lft-dyt-checks {
    grid-template-columns: 1fr;
  }
}

/* ==== Gallery Photos (gallery-photos.php) ==== */
.lft-gallery-full-section {
  padding: 100px 0 60px;
}
.lft-gallery-full-section .gallery-image {
  display: block;
  height: 280px;
}
.lft-gallery-full-section .gallery-image img {
  height: 100%;
  object-fit: cover;
}

/* ==== Gallery Videos (gallery-videos.php) ==== */
.lft-video-gallery-section {
  padding: 100px 0 60px;
}
.lft-video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  height: 320px;
}
.lft-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.lft-video-thumb:hover img {
  transform: scale(1.08);
}
.lft-video-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 20%);
  transition: background-color 0.3s ease-in-out;
}
.lft-video-thumb:hover::before {
  background-color: rgb(0 0 0 / 35%);
}
.lft-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--theme);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
.lft-video-thumb:hover .lft-video-play {
  background-color: var(--theme);
  color: var(--white);
}

/* ==== CTA de las páginas de Gallery (Photos / Videos) ==== */
.lft-gallery-cta-section {
  padding: 20px 0 100px;
}
.lft-gallery-cta-section h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--header);
  margin-bottom: 30px;
}

/* ==== FAQ (faq.php) ==== */
.lft-faq-section {
  padding: 100px 0;
}
.lft-faq-box {
  background-color: var(--bg);
  border-radius: 16px;
  padding: 40px 45px;
}
.lft-faq-box .lft-accordion-item {
  border-top: none;
  border-bottom: 1px solid var(--border);
}
.lft-faq-box .lft-accordion-item:first-child {
  border-top: none;
}
.lft-faq-box .lft-accordion-item:last-child {
  border-bottom: none;
}
.lft-faq-box .lft-accordion-btn {
  background: transparent;
  color: var(--header);
  font-size: 20px;
  padding: 20px 0;
  margin-bottom: 0;
}
.lft-faq-box .lft-accordion-btn i.fa-chevron-down {
  color: var(--theme);
}
.lft-faq-box .lft-accordion-body {
  padding: 0 40px 24px 0;
}
@media (max-width: 575px) {
  .lft-faq-box {
    padding: 30px 20px;
  }
  .lft-faq-box .lft-accordion-btn {
    font-size: 15px;
  }
}

/* ==== Contact (contact.php) ==== */
.lft-contact-section {
  padding: 100px 0 90px;
}
.lft-contact-section .section-title {
  max-width: 850px;
  margin: 0 auto 60px;
}
.lft-contact-info h3,
.lft-contact-form-box h3 {
  font-size: 36px;
  font-weight: 700;
  color: var(--header);
  margin-bottom: 30px;
}
.lft-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.lft-contact-info-item i {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background-color: var(--theme);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.lft-contact-info-item .content h6 {
  font-size: 18px;
  font-weight: 700;
  color: var(--header);
  margin-bottom: 4px;
}
.lft-contact-info-item .content a,
.lft-contact-info-item .content span {
  color: var(--text);
  font-size: 20px;
}


.lft-term-section {
    padding: 30px 0  100px 90px;
}

.lft-contact-info-logo {
  margin: 40px 0 20px;
}
.lft-contact-info-logo img {
  max-width: 100%;
}
.lft-contact-info-social a {
  background-color: var(--bg);
  color: var(--header);
}
.lft-contact-info-social a:hover {
  background-color: var(--theme);
  color: var(--white);
}

.lft-contact-form-box {
  background-color: var(--theme);
  border-radius: 16px;
  padding: 45px 50px;
}
.lft-contact-form-box h3 {
  color: var(--white);
}
.lft-contact-form .form-clt {
  margin-bottom: 0;
}
.lft-contact-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.lft-contact-form input,
.lft-contact-form textarea {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  background-color: var(--white);
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.lft-contact-form textarea {
  resize: vertical;
}
.lft-contact-form .lft-terms-check {
  color: var(--white);
  margin-top: 22px;
}
.lft-contact-form .lft-terms-check input[type="checkbox"] {
  accent-color: #0A3B45;
}
.lft-contact-form .lft-terms-check a {
  color: var(--white);
  text-decoration: underline;
}
.lft-contact-form button.theme-btn {
  margin-top: 6px;
}
@media (max-width: 575px) {
  .lft-contact-form-box {
    padding: 32px 24px;
  }
}

.lft-contact-map-section {
  line-height: 0;
}
.lft-contact-map-section iframe {
  display: block;
  width: 100%;
}

/* ==== Popup promocional (index) ==== */
.mfp-bg {
  z-index: 10050;
}
.mfp-wrap {
  z-index: 10060;
}
.popup-promocional {
  position: relative;
  width: 90vw;
  max-width: 480px;
  margin: 0 auto;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
}
.popup-promocional__slider .swiper-slide img,
.popup-promocional__slider .swiper-slide a {
  display: block;
  width: 100%;
}
.popup-promocional__slider .swiper-slide img {
  width: 100%;
  height: auto;
}
.popup-promocional__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  padding: 0;
}
.popup-promocional__cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.popup-promocional__cerrar:hover {
  background-color: var(--theme);
}
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/* ==== RTE: "Lista con ícono predeterminado" (ver administrar/includes/rte.css,
   comando listaIconos) ====
   Estas mismas reglas existen también en administrar/includes/rte.css,
   ahí escopadas a .rte__area (vista previa dentro del editor). Acá se
   repiten sin ese scope, para el contenido ya guardado que se imprime tal
   cual en el sitio público (ver patrón 3.20), con la ruta relativa correcta
   desde la raíz del sitio hasta los 13 iconoN.png reales de
   administrar/img/ — sin esta copia, cualquier <ul class="rte-li-icono-N">
   guardado desde el panel se ve bien en el editor pero sin ícono en el
   frontend. */
[class*="rte-li-icono-"] {
  list-style: none;
  padding-left: 0;
}
[class*="rte-li-icono-"] li {
  position: relative;
  padding-left: 26px;
}
.rte-li-icono-1 li::before { content: url('../../administrar/img/icono1.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-2 li::before { content: url('../../administrar/img/icono2.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-3 li::before { content: url('../../administrar/img/icono3.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-4 li::before { content: url('../../administrar/img/icono4.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-5 li::before { content: url('../../administrar/img/icono5.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-6 li::before { content: url('../../administrar/img/icono6.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-7 li::before { content: url('../../administrar/img/icono7.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-8 li::before { content: url('../../administrar/img/icono8.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-9 li::before { content: url('../../administrar/img/icono9.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-10 li::before { content: url('../../administrar/img/icono10.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-11 li::before { content: url('../../administrar/img/icono11.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-12 li::before { content: url('../../administrar/img/icono12.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-13 li::before { content: url('../../administrar/img/icono13.png'); position: absolute; left: 0; top: 0.15em; }