@font-face {
    font-family: "Freight Text Pro";
    src: url("../fonts/Freight\ Text\ Medium.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
  /* ── Colores principales (extraídos del logo) ── */
  --color-primary:              #2563EB; 
  --color-primary-dark:         #007A8A;  
  --color-primary-light:        #E8F9FC; 
  --color-secondary:            #F5C518; 
  --color-secondary-dark:       #D4A000;  
  --color-tertiary:             #FF5733; 
  --color-quaternary:           #E8F9FC;  
  --color-quinary:              #007A8A;  
  --color-dark:                 #1A1A2E;  
  --color-stencil:              #2D2D2D;  
  --color-white:                #ffffff;  
  --color-black:                #111111;

  /* ── Texto ── */
  --text-color-primary:         #000000;
  --text-color-primary-shadow:  rgba(26, 26, 46, 0.6);
  --text-color-secondary:       #ffffff;
  --text-color-secondary-shadow:#D0D0CC;
  --text-alternative:           #2D2D2D;
  --text-color-muted:           #6B7280;
  --text-color-accent:          #00B8D4;

  /* ── Fondos ── */
  --bg-primary:                 #003b95;
  --bg-primary-shadow:          #011c37; 
  --bg-secondary:               #FFFFFF;
  --bg-secondary-shadow:        #111111;
  --bg-card:                    #FFFFFF;
  --bg-card-shadow:             #E8F9FC;
  --bg-card-dark:               #12121F;
  --bg-tint:                    #E8F9FC;
  --bg-gray:                    #F0F0EC;
  --bg-alternative:             #007A8A;
  --bg-alternative-card:        #0D2B35;
  --bg-whatsapp:                #43cd66;

  /* ── Bordes ── */
  --border-color-primary:       #003b95;
  --border-color-primary-shadow:#FFFFFF;
  --border-color-secondary:     #F5C518;
  --border-color-secondary-shadow: #000;
  --border-color-alternative:   rgba(0, 184, 212, 0.18);
  --border-color-tertiary:      #FF5733;
  --border-color-quaternary:    rgba(245, 197, 24, 0.4);
  --border-primary:             #00B8D4;
  --border-secondary:           #F5C518;
  --border-muted:               rgba(0, 0, 0, 0.10);
  --border-muted-light:         rgba(255, 255, 255, 0.15);

  /* ── Tipografía ── */
  --family-primary:             "Freight Text Pro", sans-serif;
  --family-secondary:           "Inter", system-ui, sans-serif;
  --family-display:             "Freight Text Pro", sans-serif;

  /* ── Escala tipográfica ── */
  --main-size:                  clamp(2.5rem, 7vw, 4.2rem);
  --h1-size:                    clamp(2rem, 4vw, 3.5rem);
  --h2-size:                    clamp(1.5rem, 3vw, 2.25rem);
  --subtitle:                   clamp(1.2rem, 2.5vw, 1.75rem);
  --subtitle-s:                 clamp(1rem, 2vw, 1.25rem);
  --normal:                     clamp(0.875rem, 1vw, 1rem);
  --small:                      clamp(0.75rem, 0.8vw, 0.875rem);

  /* ── Botones ── */
  --btn-primary-bg:             #00B8D4;
  --btn-primary-color:          #FFFFFF;
  --btn-secondary-bg:           #F5C518;
  --btn-secondary-color:        #1A1A2E;
  --btn-outline-color:          #00B8D4;
  --button-color-primary:       rgba(0, 184, 212, 0.35);
  --button-color-secondary:     rgba(245, 197, 24, 0.35);

  /* ── Layout ── */
  --radius-sm:                  4px;
  --radius-md:                  8px;
  --radius-lg:                  16px;
  --radius-xl:                  24px;
  --shadow-card:                0 2px 16px rgba(0, 184, 212, 0.12);
  --shadow-hero:                0 4px 32px rgba(0, 0, 0, 0.20);
}

/* ============================================================
   BASE RESET
   ============================================================ */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  font-size: var(--h1-size);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--family-primary);
  font-weight: 200;
}

p,
span,
em,
a,
li,
ul,
ol,
blockquote,
cite,
label,
input,
button,
textarea,
select {
  font-family: var(--family-secondary);
}


body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  font-family: var(--family-secondary);
  color: var(--text-color-primary);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}
svg {
  width: 20px;
  justify-self: center;
}

button,
input,
select,
textarea {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

section {
  margin: 0 auto;
}

strong {
  color: var(--color-secondary);
  font-family: var(--family-primary);
  font-weight: 700;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}
/* ============================================================
   TOUR SINGLE - QUÉ LLEVAR
   ============================================================ */
#que-llevar {
    text-align: left;
    margin-left: 0;
    padding-left: 0;
}
#que-llevar ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
    align-items: flex-start;
}
#que-llevar li {
    justify-content: flex-start;
    text-align: left;
}
/* ============================================================
   CLASES DE COLOR
   ============================================================ */

.color-primary       { color: var(--color-primary); }
.color-secondary     { color: var(--color-secondary); }
.color-tertiary      { color: var(--color-tertiary); }
.color-quaternary    { color: var(--color-quaternary); }
.color-quinary       { color: var(--color-quinary); }
.color-white         { color: var(--color-white); }
.color-dark          { color: var(--color-dark); }

/* ── Fondos ── */
.bg-primary          { background-color: var(--bg-primary); }
.bg-primary-shadow   { background-color: var(--bg-primary-shadow); }
.bg-secondary        { background-color: var(--bg-secondary); }
.bg-secondary-shadow { background-color: var(--bg-secondary-shadow); }
.bg-card             { background-color: var(--bg-card); }
.bg-card-shadow      { background-color: var(--bg-card-shadow); }
.bg-card-alternative { background-color: var(--bg-alternative-card); }
.bg-alternative      { background-color: var(--bg-alternative); }
.bg-gray             { background-color: var(--bg-gray); }
.bg-color-primary    { background-color: var(--color-primary); }
.bg-color-secondary  { background-color: var(--color-secondary); }
.bg-whatsapp         {background-color: var(--bg-whatsapp);}

/* ============================================================
   BACKGROUND GRADIENTS
   ============================================================ */

.bg-gradient-top{
    background: linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 5%,
        rgba(0,0,0,0) 25%
    );
}

.bg-gradient-bottom{
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,0) 100%
    );
}

.bg-gradient-left{
    background: linear-gradient(
        to left,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,0) 100%
    );
}

.bg-gradient-right{
    background: linear-gradient(
        to right,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,0) 100%
    );
}

/* ============================================================
   ESPACIADO DE CONTENIDO RICO (WYSIWYG)
   ============================================================ */
[data-content] p,
[data-content] ul,
[data-content] ol,
[data-content] h3,
[data-content] li {
    margin-bottom: 1rem;
}
[data-content] p:last-child,
[data-content] ul:last-child,
[data-content] ol:last-child {
    margin-bottom: 0;
}
[data-content] ul,
[data-content] ol {
    padding-left: 1.5rem;
}
[data-content] ul { list-style: disc; }
[data-content] b { color: var(--color-primary); }
[data-content] ol { list-style: decimal; }

[data-content] table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

[data-content] table td,
[data-content] table th {
    border: 2px solid #ddd;
    padding: 8px 12px;
    text-align: center;
    background-color: #4fabf4;
    color: #fff;
}

[data-content] table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ============================================================
   LAYOUT GENERAL
   ============================================================ */

.max-width {
  max-width: 81rem;
  margin: 0 auto;
}
.main-container {
  padding: 5rem 2rem;
}
.img-sponsor {
  width: auto;
  height: 6.5rem;
}
.m-auto { margin: auto; }

/* ============================================================
   MÁRGENES
   ============================================================ */

.mxxs  { margin: 0.2rem; }
.mxs   { margin: 0.5rem; }
.ms    { margin: 0.75rem; }
.mm    { margin: 1rem; }
.ml    { margin: 1.5rem; }
.mxl   { margin: 2rem; }
.mxxl  { margin: 3rem; }

.mxxs-x { margin-left: 0.2rem;  margin-right: 0.2rem; }
.mxs-x  { margin-left: 0.5rem;  margin-right: 0.5rem; }
.ms-x   { margin-left: 0.75rem; margin-right: 0.75rem; }
.mm-x   { margin-left: 1rem;    margin-right: 1rem; }
.ml-x   { margin-left: 1.5rem;  margin-right: 1.5rem; }
.mxl-x  { margin-left: 2rem;    margin-right: 2rem; }
.mxxl-x { margin-left: 3rem;    margin-right: 3rem; }

.mxxs-y { margin-top: 0.2rem;  margin-bottom: 0.2rem; }
.mxs-y  { margin-top: 0.5rem;  margin-bottom: 0.5rem; }
.ms-y   { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.mm-y   { margin-top: 1rem;    margin-bottom: 1rem; }
.ml-y   { margin-top: 1.5rem;  margin-bottom: 1.5rem; }
.mxl-y  { margin-top: 2rem;    margin-bottom: 2rem; }
.mxxl-y { margin-top: 3rem;    margin-bottom: 3rem; }

.mauto-t  { margin-top: auto; }
.mxxs-t   { margin-top: 0.2rem; }
.mxs-t    { margin-top: 0.5rem; }
.ms-t     { margin-top: 0.75rem; }
.mm-t     { margin-top: 1rem; }
.ml-t     { margin-top: 1.5rem; }
.mxl-t    { margin-top: 2rem; }
.mxxl-t   { margin-top: 3rem; }

.mauto-b  { margin-bottom: auto; }
.mxxs-b   { margin-bottom: 0.2rem; }
.mxs-b    { margin-bottom: 0.5rem; }
.ms-b     { margin-bottom: 0.75rem; }
.mm-b     { margin-bottom: 1rem; }
.ml-b     { margin-bottom: 1.5rem; }
.mxl-b    { margin-bottom: 2rem; }
.mxxl-b   { margin-bottom: 3rem; }

.mauto-l  { margin-left: auto; }
.mxxs-l   { margin-left: 0.2rem; }
.mxs-l    { margin-left: 0.5rem; }
.ms-l     { margin-left: 0.75rem; }
.mm-l     { margin-left: 1rem; }
.ml-l     { margin-left: 1.5rem; }
.mxl-l    { margin-left: 2rem; }
.mxxl-l   { margin-left: 3rem; }

.mauto-r  { margin-right: auto; }
.mxxs-r   { margin-right: 0.2rem; }
.mxs-r    { margin-right: 0.5rem; }
.ms-r     { margin-right: 0.75rem; }
.mm-r     { margin-right: 1rem; }
.ml-r     { margin-right: 1.5rem; }
.mxl-r    { margin-right: 2rem; }
.mxxl-r   { margin-right: 3rem; }

/* ============================================================
   PADDINGS
   ============================================================ */

.pxxs  { padding: 0.2rem; }
.pxs   { padding: 0.5rem; }
.ps    { padding: 0.75rem; }
.pm    { padding: 1rem; }
.pl    { padding: 1.5rem; }
.pxl   { padding: 1.5rem; }
.pxxl  { padding: 3rem; }
.pc    { padding: 5rem; }

.pxxs-x { padding-left: 0.2rem;  padding-right: 0.2rem; }
.pxs-x  { padding-left: 0.5rem;  padding-right: 0.5rem; }
.ps-x   { padding-left: 0.75rem; padding-right: 0.75rem; }
.pm-x   { padding-left: 1rem;    padding-right: 1rem; }
.pl-x   { padding-left: 1.5rem;  padding-right: 1.5rem; }
.pxl-x  { padding-left: 0.5rem;    padding-right: 0.5rem; }
.pxxl-x { padding-left: 3rem;    padding-right: 3rem; }
.pc-x   { padding-left: 5rem;    padding-right: 5rem; }

.pxxs-y { padding-top: 0.2rem;  padding-bottom: 0.2rem; }
.pxs-y  { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.ps-y   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pm-y   { padding-top: 1rem;    padding-bottom: 1rem; }
.pl-y   { padding-top: 1.5rem;  padding-bottom: 1.5rem; }
.pxl-y  { padding-top: 2rem;    padding-bottom: 2rem; }
.pxxl-y { padding-top: 3rem;    padding-bottom: 3rem; }
.pc-y   { padding-top: 5rem;    padding-bottom: 5rem; }

.pxxs-t { padding-top: 0.2rem; }
.pxs-t  { padding-top: 0.5rem; }
.ps-t   { padding-top: 0.75rem; }
.pm-t   { padding-top: 1rem; }
.pl-t   { padding-top: 1.5rem; }
.pxl-t  { padding-top: 2rem; }
.pxxl-t { padding-top: 3rem; }

.pxxs-b { padding-bottom: 0.2rem; }
.pxs-b  { padding-bottom: 0.5rem; }
.ps-b   { padding-bottom: 0.75rem; }
.pm-b   { padding-bottom: 1rem; }
.pl-b   { padding-bottom: 1.5rem; }
.pxl-b  { padding-bottom: 2rem; }
.pxxl-b { padding-bottom: 3rem; }

.pxxs-r { padding-right: 0.2rem; }
.pxs-r  { padding-right: 0.5rem; }
.ps-r   { padding-right: 0.75rem; }
.pm-r   { padding-right: 1rem; }
.pl-r   { padding-right: 1.5rem; }
.pxl-r  { padding-right: 2rem; }
.pxxl-r { padding-right: 3rem; }

.pxxs-l { padding-left: 0.2rem; }
.pxs-l  { padding-left: 0.5rem; }
.ps-l   { padding-left: 0.75rem; }
.pm-l   { padding-left: 1rem; }
.pl-l   { padding-left: 1.5rem; }
.pxl-l  { padding-left: 2rem; }
.pxxl-l { padding-left: 3rem; }

/* ============================================================
   TAMAÑOS
   ============================================================ */

.w-max    { width: max-content; }
.w-min    { width: min-content; }
.w-auto   { width: auto; }
.w-full   { width: 100%; }
.w-screen { width: 100vw; }
.w-10  { width: 10%; }
.w-20  { width: 20%; }
.w-25  { width: 25%; }
.w-30  { width: 30%; }
.w-33  { width: 33.333%; }
.w-40  { width: 40%; }
.w-50  { width: 50%; }
.w-60  { width: 60%; }
.w-66  { width: 66.666%; }
.w-70  { width: 70%; }
.w-75  { width: 75%; }
.w-80  { width: 80%; }
.w-90  { width: 90%; }


.h-auto      { height: auto; }
.h-min       { height: min-content; }
.h-max       { height: max-content; }
.h-fit       { height: fit-content; }
.h-10        { height: 10%; }
.h-20        { height: 20%; }
.h-25        { height: 25%; }
.h-30        { height: 30%; }
.h-40        { height: 40%; }
.h-50        { height: 50%; }
.h-60        { height: 60%; }
.h-70        { height: 70%; }
.h-75        { height: 75%; }
.h-80        { height: 80%; }
.h-90        { height: 90%; }
.h-full,
.h-100       { height: 100%; }
.h-screen    { height: 100vh; }
.h-dvh       { height: 100dvh; }
.h-svh       { height: 100svh; }
.h-lvh       { height: 100lvh; }

.h-25vh      { height: 25vh; }
.h-50vh      { height: 50vh; }
.h-60vh      { height: 60vh; }
.h-75vh      { height: 75vh; }
.h-4         { height: 1rem; }      /* 16px */
.h-5         { height: 1.25rem; }   /* 20px */
.h-6         { height: 1.5rem; }    /* 24px */
.h-8         { height: 2rem; }      /* 32px */
.h-10r       { height: 2.5rem; }    /* 40px */
.h-12        { height: 3rem; }      /* 48px */
.h-14        { height: 3.5rem; }    /* 56px */
.h-16        { height: 4rem; }      /* 64px */
.h-20r       { height: 5rem; }      /* 80px */
.h-24        { height: 6rem; }      /* 96px */
.h-28        { height: 7rem; }      /* 112px */
.h-32        { height: 8rem; }      /* 128px */
.h-36        { height: 9rem; }      /* 144px */
.h-40r       { height: 10rem; }     /* 160px */
.h-44        { height: 11rem; }     /* 176px */
.h-48        { height: 12rem; }     /* 192px */
.h-52        { height: 13rem; }     /* 208px */
.h-56        { height: 14rem; }     /* 224px */
.h-60r       { height: 15rem; }     /* 240px */
.h-64        { height: 16rem; }     /* 256px */
.h-72        { height: 18rem; }     /* 288px */
.h-80r       { height: 20rem; }     /* 320px */
.h-96        { height: 24rem; }     /* 384px */
.h-98        { height: 35rem; }
.h-100r      { height: 45rem; }

.min-h-0       { min-height: 0; }
.min-h-full    { min-height: 100%; }
.min-h-screen  { min-height: 100vh; }
.min-h-dvh     { min-height: 100dvh; }
.min-h-svh     { min-height: 100svh; }
.min-h-lvh     { min-height: 100lvh; }
.min-h-24      { min-height: 6rem; }
.min-h-32      { min-height: 8rem; }
.min-h-40      { min-height: 10rem; }
.min-h-48      { min-height: 12rem; }
.min-h-56      { min-height: 14rem; }
.min-h-64      { min-height: 16rem; }
.min-h-72      { min-height: 18rem; }
.min-h-80      { min-height: 20rem; }
.min-h-96      { min-height: 24rem; }
.max-h-none    { max-height: none; }
.max-h-full    { max-height: 100%; }
.max-h-screen  { max-height: 100vh; }
.max-h-dvh     { max-height: 100dvh; }
.max-h-svh     { max-height: 100svh; }
.max-h-lvh     { max-height: 100lvh; }
.max-h-24      { max-height: 6rem; }
.max-h-32      { max-height: 8rem; }
.max-h-40      { max-height: 10rem; }
.max-h-48      { max-height: 12rem; }
.max-h-56      { max-height: 14rem; }
.max-h-64      { max-height: 16rem; }
.max-h-72      { max-height: 18rem; }
.max-h-80      { max-height: 20rem; }
.max-h-96      { max-height: 24rem; }
.w-max-xxxs { max-width: 11rem; }
.w-max-xxs  { max-width: 15rem; }
.w-max-xs   { max-width: 23rem; }
.w-max-s    { max-width: 33rem; }
.w-max-m    { max-width: 43rem; }
.w-max-l    { max-width: 53rem; }

.w-max-xxxs { max-width: 11rem; }
.w-max-xxs  { max-width: 15rem; }
.w-max-xs   { max-width: 23rem; }
.w-max-s    { max-width: 33rem; }
.w-max-m    { max-width: 43rem; }
.w-max-l    { max-width: 53rem; }

/* ============================================================
   POSICIONES
   ============================================================ */

.absolute { position: absolute; }
.fixed    { position: fixed; }
.relative { position: relative; }
.sticky   { position: sticky; }
.static   { position: static; }

.t-auto { top: auto; }    .t-0 { top: 0; }    .t-50 { top: 50%; }    .t-full { top: 100%; } 
.r-auto { right: auto; }  .r-0 { right: 0; }  .r-50 { right: 50%; }  .r-full { right: 100%; }
.b-auto { bottom: auto; } .b-0 { bottom: 0; } .b-50 { bottom: 50%; } .b-full { bottom: 100%; }
.l-auto { left: auto; }   .l-0 { left: 0; }   .l-50 { left: 50%; }   .l-full { left: 100%; }
.t-10 {top:10%;} .t-20 {top:20%;} .l-10 {left:10%;} .l-20 {left:20%;}

.-t-full { top: -100%; }
.-r-full { right: -100%; }
.-b-full { bottom: -100%; }
.-l-full { left: -100%; }

.inset-0    { inset: 0; }
.inset-auto { inset: auto; }

.z-0    { z-index: 0; }
.z-1    { z-index: 1; }
.z-10   { z-index: 10; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-40   { z-index: 40; }
.z-50   { z-index: 50; }
.z-full { z-index: 999; }

/* ============================================================
   DISPLAY / FLEXBOX / GRID
   ============================================================ */

.none        { display: none; }
.block       { display: block; }
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.grid        { display: grid; }
.inline-block{ display:inline-block;}
.inline-flex { display:inline-flex;}

.flex-row            { flex-direction: row; }
.flex-row-reverse    { flex-direction: row-reverse; }
.flex-column-reverse { flex-direction: column-reverse; }
.wrap                { flex-wrap: wrap; }
.wrap-reverse        { flex-wrap: wrap-reverse; }
.nowrap              { flex-wrap: nowrap; }

.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none    { flex: none; }
.grow         { flex-grow: 1; }
.grow-0       { flex-grow: 0; }
.shrink       { flex-shrink: 1; }
.shrink-0     { flex-shrink: 0; }
.basis-auto   { flex-basis: auto; }
.basis-full   { flex-basis: 100%; }
.gap-3  { gap: 0.3rem; }
.gap-5  { gap: 0.5rem; }
.gap-7  { gap: 0.75rem; }
.gap-10 { gap: 1rem; }
.gap-12 { gap: 1.25rem; }
.gap-15 { gap: 1.5rem; }
.gap-20 { gap: 2rem; }
.gap-30 { gap: 3rem; }
.gap-x-10 { column-gap: 1rem; }
.gap-x-20 { column-gap: 2rem; }
.gap-y-10 { row-gap: 1rem; }
.gap-y-20 { row-gap: 2rem; }

.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-around { align-items: space-around; }

.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-btw    { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

.justify-self-start  { justify-self: start; }
.justify-self-center { justify-self: center; }
.justify-self-end    { justify-self: end; }

.content-center { place-content: center; }
.content-start  { place-content: start; }
.content-end    { place-content: end; }
.place-items-center { place-items: center; }
.place-items-start  { place-items: start; }
.place-items-end    { place-items: end; }

/* Grid */
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-aside       { display: grid; grid-template-columns: 1fr; }
.grid-aside-rev   { display: grid; grid-template-columns: 1fr; }
.grid-auto-fit-xs { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.grid-auto-fit-s  { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cards-container  { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }

.col-span-1    { grid-column: span 1; }
.col-span-2    { grid-column: span 2; }
.col-span-3    { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; }
.row-span-1    { grid-row: span 1; }
.row-span-2    { grid-row: span 2; }

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

.text-primary           { color: var(--text-color-primary); }
.text-primary-shadow    { color: var(--text-color-primary-shadow); }
.text-secondary         { color: var(--text-color-secondary); }
.text-secondary-shadow  { color: var(--text-color-secondary-shadow); }
.text-alternative       { color: var(--text-alternative); }

.font-primary   { font-family: var(--family-primary); }
.font-secondary { font-family: var(--family-secondary); }
.font-display   { font-family: var(--family-display); }

.text-capitalize { text-transform: capitalize; }
.text-upper      { text-transform: uppercase; }
.letter-spacing-s{ letter-spacing: 2px; }
.word-spacing-s  { word-spacing: 4px; }
.leading-1       { line-height:1;}
.leading-2       { line-height:1.2;}
.leading-3       { line-height:1.5;}
.leading-4       { line-height:1.8;}
.text-no-wrap    { white-space: nowrap; }

.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-line-s  { line-height: 1.1; }

.text-xxs  { font-size: 0.625rem; }
.text-xs   { font-size: 0.755rem; }
.text-s    { font-size: 0.875rem; }
.text-m    { font-size: 1rem; }
.text-l    { font-size: 1.15rem; }
.text-xl   { font-size: 1.25rem; }
.text-xxl  { font-size: 1.5rem; }
.text-big  { font-size: 2rem; }
.text-xxls { font-size: 2.5rem; }

.text-1 { font-weight: 100; }
.text-2 { font-weight: 200; }
.text-3 { font-weight: 300; }
.text-4 { font-weight: 400; }
.text-5 { font-weight: 500; }
.text-6 { font-weight: 600; }
.text-7 { font-weight: 700; }
.text-8 { font-weight: 800; }
.text-9 { font-weight: 900; }
.text-bolder { font-weight: bolder; }

.size-main        { font-size: var(--main-size); }
.size-h1          { font-size: var(--h1-size); }
.size-h2          { font-size: var(--h2-size); }
.size-subtitle    { font-size: var(--subtitle); }
.size-description { font-size: var(--subtitle-s); }

/* ============================================================
   BORDES Y RADIUS
   ============================================================ */

.radius-xxs  { border-radius: 0.5rem; }
.radius-xs   { border-radius: 0.75rem; }
.radius-s    { border-radius: 1rem; }
.radius-m    { border-radius: 1.5rem; }
.radius-l    { border-radius: 2rem; }
.radius-xl   { border-radius: 3rem; }
.radius-full { border-radius: 9999px; }

.radiusx-xxs { border-radius: 0 0.5rem; }
.radiusx-xs  { border-radius: 0 0.75rem; }
.radiusx-s   { border-radius: 0 1rem; }
.radiusx-m   { border-radius: 0 1.5rem; }
.radiusx-l   { border-radius: 0 2rem; }
.radiusx-xl  { border-radius: 0 3rem; }

.radiusy-xxs { border-radius: 0.5rem 0; }
.radiusy-xs  { border-radius: 0.75rem 0; }
.radiusy-s   { border-radius: 1rem 0; }
.radiusy-m   { border-radius: 1.5rem 0; }
.radiusy-l   { border-radius: 2rem 0; }
.radiusy-xl  { border-radius: 3rem 0; }

.border-primary         { border: thin solid var(--border-color-primary); }
.border-primary-shadow  { border: thin solid var(--border-color-primary-shadow); }
.border-secondary       { border: thin solid var(--color-secondary); }
.border-secondary-shadow{ border: thin solid var(--border-color-secondary-shadow); }
.border-tertiary        { border: thin solid var(--color-tertiary); }

/* ============================================================
   EFECTOS
   ============================================================ */

.blur    { backdrop-filter: blur(5px); }
.blur-15 { backdrop-filter: blur(15px); }
.blur-20 { backdrop-filter: blur(20px); }

.transition      { transition: all 0.3s; }
.overflow-hidden { overflow: hidden; }
.overflow-visible{ overflow: visible; }
.overflow-auto   { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }

.pointer-none     { pointer-events: none; }
.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }
.object-fill     { object-fit: fill; }
.object-top      {object-position:top;}
.object-bottom   {object-position:bottom;}
.object-left     {object-position:left;}
.object-right    {object-position:right;}

.opacity-10 { opacity: 0.1; }
.opacity-5  { opacity: 0.5; }
.opacity-2  { opacity: 0.2; }
.opacity-1  { opacity: 0.1; }

/* ============================================================
   SOMBRAS
   ============================================================ */

.shadow-xs    { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-s     { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.shadow-m     { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.shadow-l     { box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.shadow-xl    { box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.shadow-none  { box-shadow: none; }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); }
.shadow-card  { box-shadow: var(--shadow-card); }
.shadow-hero  { box-shadow: var(--shadow-hero); }

/* ============================================================
   FIX: TRANSFORM SYSTEM (NO OVERWRITE)
   ============================================================ */

.transform {
  --tx: 0;
  --ty: 0;
  --scale: 1;
  --rotate: 0deg;

  transform:
    translate(var(--tx), var(--ty))
    scale(var(--scale))
    rotate(var(--rotate));
}

/* ============================================================
   CURSOR / SELECT / VISIBILIDAD
   ============================================================ */

.cursor-pointer    { cursor: pointer; }
.cursor-default    { cursor: default; }
.cursor-not-allowed{ cursor: not-allowed; }
.cursor-grab       { cursor: grab; }
.select-none       { user-select: none; }
.select-text       { user-select: text; }
.select-all        { user-select: all; }
.visible           { visibility: visible; }
.invisible         { visibility: hidden; }

/* ============================================================
   SVG HELPERS
   ============================================================ */

.svg-xs  { width: 0.5rem;  height: 0.5rem; }
.svg-s   { width: 0.75rem; height: 0.75rem; }
.svg-m   { width: 1rem;    height: 1rem; }
.svg-xm  { width: 1.3rem;  height: 1.3rem; }
.svg-l   { width: 1.5rem;  height: 1.5rem; }
.svg-ml  { width: 1.8rem;  height: 1.85rem; }
.svg-xl  { width: 2rem;    height: 2rem; }
.svg-xml { width: 2.5rem;  height: 2.5rem; }
.svg-xxl { width: 3rem;    height: 3rem; }
/* ============================================================
   BACKGROUND
   ============================================================ */

.bg-cover{background-size:cover;}
.bg-center{background-position:center;}
.bg-fixed{background-attachment:fixed;}
.bg-no-repeat{background-repeat:no-repeat;}

/* ============================================================
   ESTADOS: HOVER
   ============================================================ */

.hover\:opacity-5:hover          { opacity: 0.5; }
.hover\:opacity-8:hover          { opacity: 0.8; }
.hover\:scale-105:hover          { transform: scale(1.05); }
.hover\:shadow-m:hover           { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.hover\:bg-primary:hover         { background-color: var(--bg-primary); }
.hover\:bg-secondary:hover       { background-color: var(--bg-secondary); }
.hover\:bg-color-primary:hover   { background-color: var(--color-primary); }
.hover\:color-primary:hover      { color: var(--color-primary); }
.hover\:color-secondary:hover    { color: var(--color-secondary); }
.hover\:color-primary-light:hover{ color: var(--color-primary-light); }
.hover\:underline:hover          { text-decoration: underline; }
.hover\:border-primary:hover     { border-color: var(--border-color-primary); }

/* ============================================================
   ESTADOS: FOCUS / ACTIVE / DISABLED
   ============================================================ */

.focus\:border-primary:focus   { border-color: var(--border-color-primary); }
.focus\:outline-none:focus     { outline: none; }
.focus\:ring:focus             { box-shadow: 0 0 0 3px var(--border-color-quaternary); }
.active\:scale-95:active       { transform: scale(0.95); }
.disabled\:opacity-5:disabled  { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* ============================================================
   ANIMACIONES
   ============================================================ */

.animate-x { opacity: 0; }
.animate-x.show {
  animation: fade-in 0.7s ease-out forwards;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-y { opacity: 0; }
.animate-y.show {
  animation: slide-up 0.7s ease-out forwards;
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@media (min-width: 640px) {
  .sm\:flex-row    { flex-direction: row; }
  .sm\:flex-col    { flex-direction: column; }
  .sm\:none        { display: none; }
  .sm\:block       { display: block; }
  .sm\:flex        { display: flex; }
  .sm\:grid        { display: grid; }
  .sm\:grid-2      { grid-template-columns: 1fr 1fr; }
  .sm\:w-50        { width: 50%; }
  .sm\:w-100       { width: 100%; }
  .sm\:text-center { text-align: center; }
  .sm\:text-left   { text-align: left; }
  .sm\:h-60r       { height: 15rem; }
  .sm\:h-72        { height: 18rem; }
  .sm\:h-80r       { height: 20rem; }
  .sm\:h-96        { height: 24rem; }
}

@media (min-width: 768px) {
  .md\:flex-row    { flex-direction: row; }
  .md\:flex-col    { flex-direction: column; }
  .md\:none        { display: none; }
  .md\:block       { display: block; }
  .md\:flex        { display: flex; }
  .md\:grid        { display: grid; }
  .md\:grid-2      { grid-template-columns: 1fr 1fr; }
  .md\:grid-3      { grid-template-columns: 1fr 1fr 1fr; }
  .md\:grid-aside  { display: grid; grid-template-columns: 1fr 22rem; }
  .md\:grid-aside-rev  { display: grid; grid-template-columns: 13rem auto; }
  .md\:w-25        { width: 25%; }
  .md\:w-33        { width: 33.333%; }
  .md\:w-50        { width: 50%; }
  .md\:w-66        { width: 66.666%; }
  .md\:w-100       { width: 100%; }
  .md\:text-center { text-align: center; }
  .md\:text-left   { text-align: left; }
  .md\:items-center{ align-items: center; }
  .md\:justify-btw { justify-content: space-between; }
  .md\:pxl-x       { padding-left: 2rem;    padding-right: 2rem; }
  .md\:pxl         { padding: 2rem; }
  .md\:h-72        { height: 18rem; }
  .md\:h-80r       { height: 20rem; }
  .md\:h-96        { height: 24rem; }
  .md\:h-98        { height: 35rem; }
  .md\:main-container  { padding: 3rem 2rem; }
}

@media (min-width: 1024px) {
  .lg\:flex-row    { flex-direction: row; }
  .lg\:flex-col    { flex-direction: column; }
  .lg\:none        { display: none; }
  .lg\:block       { display: block; }
  .lg\:flex        { display: flex; }
  .lg\:grid        { display: grid; }
  .lg\:grid-2      { grid-template-columns: 1fr 1fr; }
  .lg\:grid-3      { grid-template-columns: 1fr 1fr 1fr; }
  .lg\:grid-4      { grid-template-columns: repeat(4, 1fr); }
  .lg\:w-25        { width: 25%; }
  .lg\:w-33        { width: 33.333%; }
  .lg\:w-50        { width: 50%; }
  .lg\:w-66        { width: 66.666%; }
  .lg\:w-75        { width: 75%; }
  .lg\:w-100       { width: 100%; }
  .lg\:pc          { padding: 5rem; }
  .lg\:gap-30      { gap: 3rem; }
  .lg\:h-80r       { height: 20rem; }
  .lg\:h-96        { height: 24rem; }
  .lg\:h-98        { height: 35rem; }
  .lg\:h-100r      { height: 45rem; }
  .lg\:h-75vh      { height: 55vh; }
  .lg\:mxxl-r   { margin-right: 10rem; }
}

@media (min-width: 1280px) {
  .xl\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .xl\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .xl\:w-25   { width: 25%; }
  .xl\:w-100  { width: 100%; }
  .xl\:h-96        { height: 24rem; }
  .xl\:h-98        { height: 35rem; }
  .xl\:h-100r      { height: 43rem; }
  .lg\:h-75vh      { height: 80vh; }
}

@media (min-width: 1536px) {
  .xxl\:grid-5 { grid-template-columns: repeat(5, 1fr); }
  .xxl\:grid-6 { grid-template-columns: repeat(6, 1fr); }
  .xxl\:w-20   { width: 20%; }
  .xxl\:w-25   { width: 25%; }
  .xxl\:h-100r { height: 50rem; }
  .xxl\:h-110r { height: 60rem; }
}
/* ============================================================
   UTILIDADES VARIAS
   ============================================================ */

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.separator-y {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--bg-primary-shadow);
}
.separator-x {
  display: block;
  width: 1px;
  height: 1rem;
  background-color: var(--bg-primary);
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    will-change: transform;
}

.header-topbar {
    min-height: 2rem;
}

.header-menu {
    padding: 0.8rem;
}

.header-menu > .max-width {
    min-height: 4rem;
}

.custom-logo {
    height: 3.5rem;
    width: auto;
}

/* ── NAVEGACIÓN DESKTOP ── */
.header-nav {
    display: block;
}

/* El UL principal */
.main-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
}

/* Los LI */
.main-menu > li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
}

/* Los enlaces */
.main-menu > li > a {
    display: block;
    padding: 0.5rem 1rem;
    color: #F7F7F5;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s ease;
    line-height: 1.2;
}

.main-menu > li > a:hover {
    color: #00B8D4;
}

/* Si hay submenús */
.main-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #1A1A2E;
    min-width: 200px;
    padding: 0.5rem 0;
    list-style: none;
    z-index: 100;
    border-radius: 4px;
}

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

.main-menu .sub-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: #F7F7F5;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: color 0.3s ease, background 0.3s ease;
}

.main-menu .sub-menu a:hover {
    color: #00B8D4;
    background: rgba(0, 184, 212, 0.1);
}

/* ── BOTÓN HAMBURGUESA ── */
.header-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: auto;
    height: auto;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
}

.header-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #F7F7F5;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animación hamburguesa */
#menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

#menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── MENÚ MÓVIL ── */
.header-mobile-menu {
    display: none;
    transition: max-height 0.4s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.header-mobile-menu .main-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
}

.header-mobile-menu .main-menu > li > a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #F7F7F5;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-mobile-menu .main-menu > li > a:hover {
    color: #00B8D4;
}
/* ── SUBMENÚ MÓVIL ACORDEÓN ── */
.header-mobile-menu .sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 1rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.header-mobile-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 1px dashed #ffb89c;
}

.mobile-submenu-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.menu-item-has-children.open > a .mobile-submenu-icon {
    transform: rotate(180deg);
}

.header-mobile-menu .sub-menu a {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #ffffff;
    text-transform: capitalize !important;
    letter-spacing: 1px;
    border-bottom: 1px dashed #ffb89c;
}

/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 1000px) {
    body {
        padding-top: 4rem;
    }

    /* Ocultar nav y botón en móvil */
    .header-nav {
        display: none;
    }

    .header-cta {
        display: none;
    }

    /* Mostrar hamburguesa */
    .header-hamburger {
        display: flex;
    }

    /* Mostrar menú móvil cuando activo */
    .header-mobile-menu {
        display: block;
    }

    /* Ocultar contactos topbar */
    .header-topbar-contact {
        display: none;
    }
}

/* ============================================================
   HERO SWIPER
   ============================================================ */
.hero-zoom-img {
  overflow: hidden;
}

.hero-zoom-img img {
    transform: scale(1.05);
    will-change: transform;
}

.heroSwiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(247, 247, 245, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.heroSwiper .swiper-pagination-bullet-active {
    background: var(--color-primary);
    transform: scale(1.4);
}

.heroSwiper .swiper-button-prev,
.heroSwiper .swiper-button-next {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.heroSwiper .swiper-button-prev:hover,
.heroSwiper .swiper-button-next:hover {
    background: rgba(26, 26, 46, 0.8);
}

.heroSwiper .swiper-button-prev::after,
.heroSwiper .swiper-button-next::after {
    font-size: 1.2rem;
    font-weight: 700;
}

@media (max-width: 640px) {
    .heroSwiper .swiper-button-prev,
    .heroSwiper .swiper-button-next {
        display: none;
    }
}

/*=========================================
=            INTRO COLLAGE
=========================================*/

.intro-collage{
    display:grid;
    grid-template-columns:2fr 1fr;
    grid-template-rows:220px 220px 350px;
    gap:20px;
}

.collage-item{
    overflow:hidden;
    border-radius:24px;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,.16);
}

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

.collage-item:hover img{
    transform:scale(1.08);
}

/* Imagen grande */

.collage-main{
    grid-column:1;
    grid-row:1 / span 2;
}

/* Arriba derecha */

.collage-small-1{
    grid-column:2;
    grid-row:1;
}

/* Centro derecha */

.collage-small-2{
    grid-column:2;
    grid-row:2;
}

/* Imagen inferior */

.collage-wide{
    grid-column:1 / span 2;
    grid-row:3;

}

.collage-item:hover{

    z-index:2;

}

@media(max-width:992px){

.intro-collage{

    grid-template-columns:1fr 1fr;

    grid-template-rows:220px 220px 170px;

}

}

@media(max-width:768px){

.intro-collage{

    grid-template-columns:1fr 1fr;

    grid-template-rows:180px 180px 150px;

    gap:12px;

}

.collage-item{

    border-radius:18px;

}

.collage-main,
.collage-small-1,
.collage-small-2,
.collage-wide{
    transform:none;
}

}

.fact-item{
    display:flex;
    align-items:center;
    gap:15px;
    padding: 8px;
    border-radius: 10px;
    background-color: #ffe700;
}

.fact-item img{
    width:48px;
    height:48px;
    flex-shrink:0;
}
.fact-item span{
    display:block;
    color:var(--color-primary);
    font-size:28px;
    font-weight:700;
    line-height:1;
}
.fact-item small{
    display:block;
    color:#020202;
    margin-top:4px;
    font-size:15px;
}
.tour-highlights{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    color:#374151;
    line-height:1.4;
}

.tour-highlight-separator{
    color:var(--color-secondary);
}

/* ============================================================
   TOURS-FRONTEND
   ============================================================ */
.tour-card-media { aspect-ratio: 3 / 4; }
.tour-card-img { transition: transform 0.5s ease; }
.tour-card:hover .tour-card-img { transform: scale(1.06); }
.tour-card-footer { border-top: 1px solid var(--border-muted); }
.tours-swiper-prev,
.tours-swiper-next { width: 2.75rem; height: 2.75rem; }
.difficulty-easy        { background-color: var(--color-quinary); }
.difficulty-moderate     { background-color: var(--color-secondary); color: var(--color-dark); }
.difficulty-challenging  { background-color: var(--color-tertiary); }
.difficulty-default      { background-color: var(--color-primary); }

.signature-tours-swiper {
  width: 100%;
  overflow: hidden;
}
.signature-tours-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.signature-tours-swiper .swiper-slide {
  height: auto;
  flex-shrink: 0;
}
.swiper-slide{
  padding: 0.8rem;
}
.signature-tours-swiper-prev,
.signature-tours-swiper-next {
  width: 2.75rem;
  height: 2.75rem;
}

/* ============================================================
   FEATURED IN — marquee infinito
   ============================================================ */
.featured-in-track-wrap {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.featured-in-track {
  width: max-content;
  animation: featured-in-scroll 25s linear infinite;
}
.featured-in-item {
  padding: 0 3rem;
}
@keyframes featured-in-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SINGLE TOUR
   ============================================================ */
/* Gallery hover */
.gallery-item img {
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item:hover .gallery-overlay {
  opacity: 0;
}
/* Related tours card hover */
.related-tours-card:hover img {
  transform: scale(1.08);
}

/* Swiper navigation para related tours */
.related-tours-swiper .swiper-button-prev,
.related-tours-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  background: var(--bg-card);
  border-radius: 50%;
  box-shadow: var(--shadow-s);
  top: 40%;
}

.related-tours-swiper .swiper-button-prev:after,
.related-tours-swiper .swiper-button-next:after {
  font-size: 1rem;
  color: var(--color-primary);
}

.related-tours-swiper .swiper-button-prev {
  left: -5px;
}

.related-tours-swiper .swiper-button-next {
  right: -5px;
}

/* ============================================================
   FORM INPUTS & TEXTAREA
   ============================================================ */

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.875rem;
    font-family: var(--family-secondary);
    transition: all 0.3s ease;
    outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-input:focus,
.form-textarea:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.25);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Date picker */
.form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Submit */
.form-submit {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border: 2px solid #fff;
    border-radius: 0.5rem;
    background: #fff;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--family-primary);
}

.form-submit:hover {
    background: transparent;
    color: #fff;
}

/* CF7 validation */
.wpcf7-not-valid-tip {
    color: var(--color-secondary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.wpcf7-not-valid {
    border-color: var(--color-secondary) !important;
}

.wpcf7-response-output {
    color: #ff0000;
    font-size: 0.875rem;
    text-align: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin: 0;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tint-primary   { background: rgba(37, 99, 235, 0.12); color: var(--color-primary); }
.tint-secondary { background: rgba(245, 197, 24, 0.20); color: var(--color-secondary-dark); }
.tint-tertiary  { background: rgba(255, 87, 51, 0.12);  color: var(--color-tertiary); }
.tint-quinary   { background: rgba(0, 122, 138, 0.12);  color: var(--color-quinary); }

.icon-circle-sm {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.icon-circle-sm svg { width: 1.1rem; height: 1.1rem; }

.tour-tab-btn.is-active .icon-circle-sm,
.tour-accordion-header.is-active .icon-circle-sm {
  background: var(--color-primary) !important;
  color: #fff !important;
  transform: scale(1.05);
}

.related-description{
    max-height:0;
    opacity:0;
    transform:translateY(25px);
    transition:all .35s ease;
}

.swiper-slide a:hover .related-description{
    max-height:120px;
    opacity:1;
    transform:translateY(0);
}
.swiper-slide a img{
    transition:transform .6s ease;
}

.swiper-slide a:hover img{
    transform:scale(1.08);
}

/* ============================================
   GRID 2x2 - TEXTO ARRIBA IZQ / IMAGEN ABAJO DER
   ============================================ */
/* Overlay sutil para que el texto sea legible */
.sustainable-tourism-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.page-content-section {
    padding: 80px 0;
}

/* Separación entre párrafos del editor */
.editor-content p {
    margin-bottom: 24px;
}

.editor-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .hero-section [style*="min-height"] {
        min-height: 350px !important;
    }
}
.hero-slider{
    height: 100vh;
    min-height: 680px;
}