:root {
  /* ── Colores principales (extraídos del logo) ── */
  --color-primary:              #00B8D4;  /* turquesa logo */
  --color-primary-dark:         #007A8A;  /* hover / profundo */
  --color-primary-light:        #E8F9FC;  /* fondos suaves */
  --color-secondary:            #F5C518;  /* amarillo logo */
  --color-secondary-dark:       #D4A000;  /* dorado Nazca */
  --color-tertiary:             #FF5733;  /* acento cálido */
  --color-quaternary:           #E8F9FC;  /* alias light (compat.) */
  --color-quinary:              #007A8A;  /* alias dark  (compat.) */
  --color-dark:                 #1A1A2E;  /* noche andina */
  --color-stencil:              #2D2D2D;  /* gris stencil logo */
  --color-white:                #ffffff;  /* blanco arena */
  --color-black:                #111111;

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

  /* ── Fondos ── */
  --bg-primary:                 #F7F7F5;
  --bg-primary-shadow:          #2D2D2D; 
  --bg-secondary:               #1a1a2e;
  --bg-secondary-shadow:        #111111;
  --bg-card:                    #FFFFFF;
  --bg-card-shadow:             #E8F9FC;
  --bg-card-dark:               #12121F;
  --bg-tint:                    #E8F9FC;
  --bg-gray:                    #F0F0EC;
  --bg-alternative:             #00B8D4;
  --bg-alternative-card:        #0D2B35;

  /* ── Bordes ── */
  --border-color-primary:       #00B8D4;
  --border-color-primary-shadow:#FFFFFF;
  --border-color-secondary:     #F5C518;
  --border-color-secondary-shadow: rgba(0, 184, 212, 0.18);
  --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.1);
  --border-muted-light:         rgba(255, 255, 255, 0.15);

  /* ── Tipografía ── */
  --family-primary:             "Montserrat", "Inter", sans-serif;
  --family-secondary:           "Inter", system-ui, sans-serif;
  --family-display:             "Bebas Neue", "Montserrat", sans-serif;

  /* ── Escala tipográfica ── */
  --main-size:                  clamp(2.5rem, 7vw, 5.5rem);
  --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: 700;
}

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);
  background-color: var(--bg-primary);
  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-color-tertiary   { background-color: var(--color-tertiary); }
.bg-color-quinary   { background-color:  var(--color-quinary); }
/* ============================================================
   ESPACIADO DE CONTENIDO RICO (WYSIWYG)
   ============================================================ */
[data-content] p,
[data-content] ul,
[data-content] ol {
    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] ol { list-style: decimal; }

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

.max-width {
  max-width: 81rem;
  margin: 0 auto;
}
.main-container {
  padding: 5rem 2rem;
}
.img-sponsor {
  width: auto;
  height: 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: 2rem; }
.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: 2rem;    padding-right: 2rem; }
.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; }

/* ============================================================
   ASPECT RATIO
   ============================================================ */

.aspect-auto    { aspect-ratio: auto; }
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-4-3     { aspect-ratio: 4 / 3; }
.aspect-3-2     { aspect-ratio: 3 / 2; }
.aspect-21-9    { aspect-ratio: 21 / 9; }
.aspect-3-4     { aspect-ratio: 3 / 4; }  /* retrato */
.aspect-2-3     { aspect-ratio: 2 / 3; }  /* retrato */
.aspect-9-16    { aspect-ratio: 9 / 16; } /* retrato / stories */
/* ==========================================
   WIDTH
========================================== */
.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%; }
.w-100 { width: 100%; }

/* ==========================================
   MAX WIDTH
========================================== */
.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; }

/* ==========================================
   HEIGHT
========================================== */
.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-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; }     /* 560px */
.h-100r      { height: 45rem; }     /* 720px */

/* ==========================================
   MIN HEIGHT
========================================== */
.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 HEIGHT
========================================== */
.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; }

/* ============================================================
   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-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-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-left   { text-align: left; }
.text-right  { text-align: right; }

.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); }
.size-normal      { font-size: var(--normal);}

/* ============================================================
   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); }
.border-top             { border-top: 1px solid var(--border-muted);}

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

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

.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; }
/* Nota: .opacity-9/.opacity-8/.opacity-7 (más abajo) valen 0.9/0.8/0.7,
   así que .opacity-10 no sigue ese mismo patrón (debería ser 1). Se
   deja igual para no romper usos existentes, pero conviene revisarlo. */

/* ============================================================
   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\: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
   Breakpoints: sm 640px / md 768px / lg 1024px / xl 1280px
   Uso en HTML: class="flex-col md:flex-row lg:w-50"
   ============================================================ */

@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; }
}

@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  { grid-template-columns: 1fr 22rem; }
  .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\:pl          { padding: 3rem; }
  .md\:order-1     { order: 1; }
  .md\:order-2     { order: 2; }
}

@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\:pm-x        { padding-left: 5rem;    padding-right: 5rem; }
}

@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%; }
}
/* ============================================================
  whyus-section.php
   ============================================================ */
.grid-3-2-2 { grid-template-columns: 3fr 2fr 2fr; }

@media (min-width: 1024px) {
  .lg\:grid-3-2-2 { grid-template-columns: 3fr 2fr 2fr; }
}

.border-l-primary   { border-left: 4px solid var(--color-primary); }
.border-l-secondary { border-left: 4px solid var(--color-secondary); }
.border-l-tertiary  { border-left: 4px solid var(--color-quinary); }
.box-xs { width: 1rem;   height: 1rem; }
.box-s  { width: 1.5rem; height: 1.5rem; }
.box-m  { width: 2rem;   height: 2rem; }
.box-l  { width: 2.5rem; height: 2.5rem; }

/* ============================================================
   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 SCROLL - Topbar se oculta, menú se mantiene
   ============================================================ */

/* Topbar - se oculta al scroll */
.site-topbar {
  transform: translateY(0);
  opacity: 1;
}

.site-topbar.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Menú de navegación - siempre fijo */
.site-nav {
  top: auto; /* Se posiciona con JS */
}

.site-nav.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 184, 212, 0.15);
}

/* Logo scroll (visible solo cuando topbar está oculto) */
.logo-scroll {
  display: none;
}

.site-nav.is-scrolled .logo-scroll {
  display: flex;
}

.logo-scroll img {
  width: auto;
  height: 4rem;
  object-fit: contain;
}

/* CTA scroll */
.btn-cta-scroll {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  transition: background-color 0.25s, box-shadow 0.25s;
}

.site-nav.is-scrolled .btn-cta-scroll {
  display: flex;
}

.btn-cta-scroll:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 4px 16px rgba(0,184,212,0.35);
}

/* Rating badges */
.rating-icon {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.stars svg { width: 0.65rem; height: 0.65rem; }

/* Lang switcher */
.lang-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.lang-panel {
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
}

.lang-switcher:hover .lang-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switcher:hover .chevron { transform: rotate(180deg); }

.lang-panel a:first-child { border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.lang-panel a:last-child { border-radius: 0 0 var(--radius-xs) var(--radius-xs); }

/* Divisor vertical */
.v-divider {
  width: 1px;
  height: 1.5rem;
  background-color: var(--border-muted);
}

/* Separador menú móvil (variante sobre fondo oscuro) */
.separator-y.on-dark {
  background-color: rgba(255,255,255,0.15);
}

/* CTA */
.btn-cta {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.2s;
}

.btn-cta:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 4px 16px rgba(0,184,212,0.35);
  transform: translateY(-1px);
}

.btn-cta:active { transform: translateY(0); }

.header-mobile-menu .btn-cta {
  background-color: var(--color-secondary);
  color: var(--color-dark) !important;
}

.header-mobile-menu .btn-cta:hover {
  background-color: var(--color-secondary-dark);
}

/* Navegación desktop */
.header-nav {
  border-bottom: 2px solid var(--color-primary-light);
  transition: transform 0.3s ease;
}

.main-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu > .menu-item { position: relative; }

.main-menu > .menu-item > a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  font-family: var(--family-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.main-menu > .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0.5rem;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.main-menu > .menu-item > a:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.main-menu > .menu-item > a:hover::after,
.main-menu > .current-menu-item > a::after,
.main-menu > .current_page_parent > a::after {
  transform: scaleX(1);
}

.main-menu > .current-menu-item > a,
.main-menu > .current_page_parent > a {
  color: var(--color-primary);
}

/* Flecha submenú */
.main-menu > .menu-item-has-children > a::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.2rem;
  transition: transform 0.25s;
}

.main-menu > .menu-item-has-children:hover > a::before {
  transform: rotate(-135deg);
}

/* Submenú */
.main-menu .sub-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 220px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-xs);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  z-index: 200;
}

.main-menu > .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-menu .sub-menu .menu-item a {
  display: block;
  padding: 0.6rem 1.5rem;
  font-family: var(--family-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.main-menu .sub-menu .menu-item a:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  padding-left: 2rem;
}

.main-menu .sub-menu .menu-item-has-children { position: relative; }
.main-menu .sub-menu .sub-menu {
  top: -0.5rem;
  left: 100%;
}

/* Hamburguesa */
.header-hamburger {
  width: 2.2rem;
  height: 2.2rem;
}

.header-hamburger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.header-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.header-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Menú móvil */
.header-mobile-menu { transition: max-height 0.4s ease; }

.mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav > .menu-item > a {
  display: block;
  padding: 0.8rem 0;
  color: var(--color-white);
  font-family: var(--family-primary);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: color 0.2s, padding-left 0.2s;
}

.mobile-nav > .menu-item > a:hover {
  color: var(--color-secondary);
  padding-left: 0.5rem;
}

.mobile-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.25rem 1rem;
  display: none;
}

.mobile-nav > .menu-item-has-children.open > .sub-menu { display: block; }

.mobile-nav .sub-menu .menu-item a {
  display: block;
  padding: 0.55rem 0;
  color: rgba(255,255,255,0.8);
  font-family: var(--family-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s, padding-left 0.2s;
}

.mobile-nav .sub-menu .menu-item a:hover {
  color: var(--color-secondary);
  padding-left: 0.5rem;
}

.mobile-nav > .menu-item-has-children > a { justify-content: space-between; }

.mobile-nav > .menu-item-has-children > a::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 300;
}

.mobile-nav > .menu-item-has-children.open > a::after { content: '−'; }

/* Overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   RESPONSIVE — Header
   El mostrar/ocultar (nav, hamburguesa, menú móvil, texto CTA) ya
   se resuelve con tus utilitarias existentes (none / lg:flex /
   lg:inline) puestas directamente en el HTML — no hace falta
   repetirlo aquí con @media + !important.
   Aquí solo quedan tamaños de componente que no tienen una
   utilitaria equivalente (logo, botón CTA, links del menú).
   ============================================================ */
@media (max-width: 1023px) {
  .logo-container { max-width: 130px; }
  .logo-container img { height: 2rem !important; width: auto !important; }
  .btn-cta { padding: 0.4rem 0.6rem; font-size: 0.7rem; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .logo-container { max-width: 140px; }
  .logo-container img { height: 5.2rem !important; width: auto !important; }
  .main-menu > .menu-item > a { padding: 0.8rem 0.7rem; font-size: 0.78rem; }
}

@media (min-width: 1280px) {
  .logo-container { max-width: 180px; }
  .logo-container img { height: 5.8rem !important; width: auto !important; }
  .main-menu > .menu-item > a { padding: 1rem 1.2rem; font-size: 0.9rem; }
}

/* El topbar debe pintarse SIEMPRE por encima del menú fijo de abajo,
   para que el dropdown de idiomas (que cuelga del topbar) nunca
   quede tapado por el <header id="site-header"> que viene después
   en el HTML y comparte el mismo z-full (999). */
#site-topbar { z-index: 1000; }
/* Agrega estas clases a tu sistema de utilitarias */
.border-bottom-muted { border-bottom: 1px solid var(--border-muted); }
.border-bottom-primary-light { border-bottom: 2px solid var(--color-primary-light); }
.border-muted { border: 1px solid var(--border-muted); }
.bg-primary-light { background-color: var(--color-primary-light); }
.hover\:bg-primary-light:hover { background-color: var(--color-primary-light); }
.hover\:color-secondary:hover { color: var(--color-secondary); }
.text-white { color: var(--color-white); }
.z-100 { z-index: 100; }
.z-200 { z-index: 200; }
/* ============================================================
   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: rgba(26, 26, 46, 0.5);
    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;
    }
}
  /* ─────────────────────────────────────────
     TOURS DIAGONAL STACK
  ───────────────────────────────────────── */
  .tour-slide {
    position: sticky;
    top: 0;
    height: 80vh;
    overflow: hidden;
  }

  .tour-slide:nth-child(1) { z-index: 1; }
  .tour-slide:nth-child(2) { z-index: 2; margin-top: -8vh; }
  .tour-slide:nth-child(3) { z-index: 3; margin-top: -8vh; }
  /* Si añades más slides: nth-child(4) { z-index: 4; margin-top: -8vh; } */

  /* ─────────────────────────────────────────
     IMAGEN DE FONDO
  ───────────────────────────────────────── */
  .tour-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  /* ─────────────────────────────────────────
     DIAGONAL
  ───────────────────────────────────────── */
  .tour-slide:not(:first-child) .tour-slide__bg {
    clip-path: polygon(0 8vh, 100% 0, 100% 100%, 0 100%);
  }

  /* Overlay */
  .tour-slide__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.30) 55%,
      rgba(0,0,0,0.05) 100%
    );
    z-index: 1;
  }

  .tour-slide:not(:first-child) .tour-slide__overlay {
    clip-path: polygon(0 8vh, 100% 0, 100% 100%, 0 100%);
  }

  /* ─────────────────────────────────────────
     CONTENIDO
  ───────────────────────────────────────── */
  .tour-slide__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 8vw;
  }

  .tour-slide__inner {
    max-width: 560px;
  }

  .tour-slide:nth-child(even) .tour-slide__content {
    justify-content: flex-end;
  }
  .tour-title {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 1rem;
  }

  .tour-desc {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: rgba(255,255,255,0.82);
    line-height: 1.65;
    margin-bottom: 1.8rem;
    max-width: 420px;
  }

  .tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 13px 22px;
    text-decoration: none;
    transition: background 0.25s, color 0.25s;
  }

  .tour-btn:hover {
    background: #fff;
    color: #111;
  }

  .tour-btn svg {
    transition: transform 0.2s;
  }

  .tour-btn:hover svg {
    transform: translateX(4px);
  }

  /* ─────────────────────────────────────────
     MOBILE
  ───────────────────────────────────────── */
  @media (max-width: 768px) {
    .tour-slide:nth-child(n+2) {
      margin-top: -5vh;
    }
    
    .tour-slide:not(:first-child) .tour-slide__bg {
      clip-path: polygon(0 5vh, 100% 0, 100% 100%, 0 100%);
    }
    
    .tour-slide:not(:first-child) .tour-slide__overlay {
      clip-path: polygon(0 5vh, 100% 0, 100% 100%, 0 100%);
    }
    
    .tour-slide__content {
      padding: 0 6vw;
      align-items: flex-end;
      padding-bottom: 10vh;
    }
    
    .tour-slide:nth-child(even) .tour-slide__content {
      justify-content: flex-start;
    }
  }
/* ============================================================
   SINGLE TOUR — estilos complementarios
   Usa las variables definidas en :root del theme.
   Encolar DESPUÉS de la hoja de utilidades principal.
   ============================================================ */

/* ── Utilidades que faltaban en el sistema base ── */
.opacity-9 { opacity: 0.9; }
.opacity-8 { opacity: 0.8; }
.opacity-7 { opacity: 0.7; }
.border-b  { border-bottom: 1px solid var(--border-muted); }
/* .pl-y ya existe en la sección PADDINGS — no se repite aquí */

/* ── Anclas: compensar la altura del nav de tabs sticky ── */
.tour-section {
  scroll-margin-top: 4.5rem;
}

/* ============================================================
   HERO — galería a pantalla completa
   1 imagen grande (izq.) + columna de 2 imágenes (der.)
   ============================================================ */

.tour-hero-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
}

.tour-hero-main img,
.tour-hero-side-img img {
  transition: transform 0.6s ease;
}
.tour-hero-main:hover img,
.tour-hero-side-img:hover img {
  transform: scale(1.04);
}

.tour-hero-side {
  gap: 4px;
}
.tour-hero-side-img {
  flex: 1 1 50%;
}

.tour-hero-more {
  background: rgba(17, 17, 17, 0.55);
  font-family: var(--family-primary);
}

.tour-hero-info {
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.85) 0%,
    rgba(17, 17, 17, 0.35) 55%,
    rgba(17, 17, 17, 0) 100%
  );
  padding-top: 6rem;
}

.tour-hero-gallery-btn {
  right: 2rem;
  bottom: 2rem;
  box-shadow: var(--shadow-card);
}
.tour-badge {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 767px) {
  .tour-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 60% 40%;
  }
  .tour-hero-side {
    flex-direction: row;
  }
  .tour-hero-gallery-btn {
    right: 1rem;
    bottom: 1rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ============================================================
   TABS DE NAVEGACIÓN
   ============================================================ */

.tour-tabs {
  top: 0;
}
.tour-tabs > .max-width {
  scrollbar-width: none;
}
.tour-tabs > .max-width::-webkit-scrollbar {
  display: none;
}

.tour-tab-link {
  padding: 1rem 0;
  border-bottom: 2px solid transparent;
  opacity: 0.65;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.tour-tab-link:hover {
  opacity: 1;
}
.tour-tab-link.is-active {
  opacity: 1;
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* ============================================================
   TIMELINE DEL ITINERARIO
   ============================================================ */

.tour-timeline-item {
  padding-left: 1.75rem;
  border-left: 2px solid var(--border-color-secondary-shadow);
}
.tour-timeline-item:last-child {
  border-left-color: transparent;
}

.tour-timeline-dot {
  top: 0.3rem;
  left: -0.5rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* ============================================================
   GALERÍA
   ============================================================ */

.tour-gallery-item {
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   FAQs (details/summary)
   ============================================================ */

.tour-faq-item summary {
  list-style: none;
}
.tour-faq-item summary::-webkit-details-marker {
  display: none;
}
.tour-faq-icon {
  transition: transform 0.25s ease;
}
.tour-faq-item[open] .tour-faq-icon {
  transform: rotate(45deg);
}

/* ============================================================
   SIDEBAR DE RESERVA
   ============================================================ */

.tour-sidebar {
  align-self: start;
}

.tour-booking-card {
  top: 5.5rem;
  border: 1px solid var(--border-color-alternative);
  overflow: hidden;
}

.tour-price-old {
  color: var(--text-color-muted);
  text-decoration: line-through;
}

.tour-input {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  font-size: var(--small);
  color: var(--text-color-primary);
  background-color: var(--bg-primary);
}
.tour-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--border-color-quaternary);
}

.tour-whatsapp-btn {
  background-color: #25d366;
}
.tour-whatsapp-btn:hover {
  opacity: 0.85;
}

@media (max-width: 1023px) {
  .tour-booking-card {
    position: static;
  }
}

/* ==========================================================
   PACKAGES SECTION
========================================================== */
.pkg-block{
    position:relative;
}
.pkg-visual{
    background:var(--color-dark);
}
.pkg-slide-info{
    left:1.5rem;
    right:1.5rem;
    bottom:1.5rem;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.pkg-slide-meta{
    opacity:.85;
}
.pkg-slide-dot{
    opacity:.6;
}
.pkg-swiper-prev,
.pkg-swiper-next{
    width:2.75rem;
    height:2.75rem;
    bottom:1.5rem;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    backdrop-filter:blur(6px);
    transition:.25s;

}
.pkg-swiper-prev{
    right:4.5rem;
}
.pkg-swiper-next{
    right:1rem;
}
.pkg-swiper-prev:hover,
.pkg-swiper-next:hover{
    background:rgba(255,255,255,.3);
}
@media (max-width:767px){

    .pkg-visual{

        height:320px !important;

    }

}
/* ============================================================
   FEATURED IN — marquee infinito
   ============================================================ */
.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%); }
}

/* ============================================================
   TOUR SWIPER — flechas y paginación
   ============================================================ */

.tour-swiper {
  padding-bottom: 3rem;
}

.tour-swiper .swiper-button-next,
.tour-swiper .swiper-button-prev {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  background-color: var(--bg-card);
  color: var(--color-primary);
  border-radius: 9999px;
  box-shadow: var(--shadow-card);
  transition: background-color 0.3s, color 0.3s;
}

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

.tour-swiper .swiper-button-next:hover,
.tour-swiper .swiper-button-prev:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.tour-swiper .swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tour-swiper .swiper-pagination {
  position: static;
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.tour-swiper .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--border-muted);
  opacity: 1;
  transition: background-color 0.3s, width 0.3s;
}

.tour-swiper .swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  width: 1.5rem;
  border-radius: 9999px;
}
/* ============================================================
   FAQS
   ============================================================ */
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.faq-icon{
    transition:transform .3s ease;
}

.faq-item.is-open .faq-icon{
    transform:rotate(45deg);
}

/* ============================================================
   ABOUT & CONTACT PAGES
   ============================================================ */

/* Timeline responsive */
@media (max-width: 768px) {
    #about-timeline .flex-row-reverse {
        flex-direction: row !important;
    }
    #about-timeline .w-50 {
        width: 100%;
    }
    #about-timeline .text-right,
    #about-timeline .text-left {
        text-align: left;
    }
}

/* FAQ details */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary {
    color: var(--color-primary);
}

/* Box sizes adicionales */
.box-xl { width: 3.5rem; height: 3.5rem; }
.box-96 { width: 6rem; height: 6rem; }
.box-80 { width: 5rem; height: 5rem; }

/* Select styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    padding-right: 2.5rem;
}

/* Transiciones suaves */
.transition {
    transition: all 0.3s ease;
}

/* Efectos hover */
.hover\:shadow-l:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}