/* ═══════════════════════════════════════════════════
   VuelaVuela — main.css v2
   Paleta CLARA — fondo crema, tipografía oscura
═══════════════════════════════════════════════════ */

:root {
    /* ── Fondos ── */
    --vv-bg:        #f5f2ec;   /* crema principal */
    --vv-bg2:       #edeae3;   /* crema oscuro */
    --vv-bg3:       #ffffff;   /* blanco puro */
    --vv-bg-card:   #eeebe4;   /* tarjetas */
    --vv-bg-dark:   #1c1916;   /* secciones oscuras (pilares, galería) */

    /* ── Texto ── */
    --vv-ink:       #1c1916;   /* casi negro */
    --vv-ink2:      #3d3830;   /* texto secundario */
    --vv-gray:      #6a6560;   /* cuerpo */
    --vv-gray-2:    #9a9590;   /* metadata, labels */
    --vv-white:     #ffffff;

    /* ── Reglas y bordes ── */
    --vv-rule:      #ddd8ce;

    /* ── Paleta del logo VuelaVuela ── */
    --vv-yellow:    #e8a020;
    --vv-orange:    #e05c1a;
    --vv-red:       #c8281e;
    --vv-teal:      #1a8fa0;

    /* ── Acento principal ── */
    --vv-accent:    #e05c1a;
    --vv-accent-d:  #c44c12;
    --vv-accent-l:  #fdf0e8;

    /* ── Tipografía ── */
    --vv-font-sans:  'Plus Jakarta Sans', 'Inter', sans-serif;
    --vv-font-serif: 'Playfair Display', Georgia, serif;

    /* ── Layout ── */
    --vv-max-w:     1200px;
    --vv-gutter:    2rem;
    --vv-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --vv-dur:       0.35s;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--vv-bg);
    color: var(--vv-ink);
    font-family: var(--vv-font-sans);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }

/* ── TIPOGRAFÍA ── */
.vv-display-xl {
    font-family: var(--vv-font-sans);
    font-size: 7rem;
    font-weight: 700; line-height: .9;
    letter-spacing: -.02em; text-transform: uppercase;
}
.vv-display-lg {
    font-family: var(--vv-font-sans);
    font-size: 5rem;
    font-weight: 700; line-height: .92;
    letter-spacing: -.02em; text-transform: uppercase;
}
.vv-display-md {
    font-family: var(--vv-font-sans);
    font-size: 2.8rem;
    font-weight: 700; line-height: 1;
    letter-spacing: -.015em; text-transform: uppercase;
}
.vv-serif {
    font-family: var(--vv-font-serif);
    font-style: italic; font-weight: 400;
}
.vv-label {
    font-size: .65rem; font-weight: 600;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--vv-gray-2);
}
.vv-body {
    font-size: .95rem; font-weight: 300;
    line-height: 1.85; color: var(--vv-gray);
}

/* ── LAYOUT ── */
.vv-container { max-width: var(--vv-max-w); margin: 0 auto; padding: 0 var(--vv-gutter); }
.vv-section    { padding: 7rem var(--vv-gutter); }
.vv-section-sm { padding: 4rem var(--vv-gutter); }

/* ── BARRA DE 4 COLORES ── */
.vv-colorbar { display: flex; height: 4px; width: 100%; }
.vv-colorbar span { flex: 1; }
.vv-colorbar span:nth-child(1) { background: var(--vv-yellow); }
.vv-colorbar span:nth-child(2) { background: var(--vv-orange); }
.vv-colorbar span:nth-child(3) { background: var(--vv-red); }
.vv-colorbar span:nth-child(4) { background: var(--vv-teal); }

/* ── BOTONES ── */
.vv-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--vv-font-sans); font-weight: 600;
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    padding: .75rem 1.8rem; border: none; cursor: pointer;
    transition: all var(--vv-dur) var(--vv-ease); white-space: nowrap; line-height: 1;
}
.vv-btn-primary { background: var(--vv-accent); color: #fff; }
.vv-btn-primary:hover { background: var(--vv-accent-d); color: #fff; transform: translateY(-2px); }
.vv-btn-outline { border: 1.5px solid var(--vv-ink); color: var(--vv-ink); background: transparent; }
.vv-btn-outline:hover { background: var(--vv-ink); color: var(--vv-bg); transform: translateY(-2px); }
.vv-btn-outline-light { border: 1.5px solid rgba(255,255,255,.4); color: #fff; background: transparent; }
.vv-btn-outline-light:hover { border-color: #fff; }

/* ── FLECHA LINK ── */
.vv-arrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--vv-accent);
    transition: color var(--vv-dur), gap var(--vv-dur);
}
.vv-arrow:hover { gap: .7rem; color: var(--vv-accent-d); }
.vv-arrow svg { transition: transform var(--vv-dur); }
.vv-arrow:hover svg { transform: translateX(3px); }

/* ── REVEAL ── */
.vv-reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .75s var(--vv-ease), transform .75s var(--vv-ease);
    transition-delay: var(--vv-delay, 0ms);
}
.vv-reveal.is-visible { opacity: 1; transform: none; }

/* ── REGLA ── */
.vv-rule { border: none; border-top: 1px solid var(--vv-rule); }

/* ── ASPECT RATIOS ── */
.vv-aspect-16-9 { aspect-ratio: 16/9; }
.vv-aspect-4-3  { aspect-ratio: 4/3; }
.vv-aspect-3-4  { aspect-ratio: 3/4; }
.vv-aspect-1-1  { aspect-ratio: 1/1; }
.vv-aspect-16-9 img, .vv-aspect-4-3 img,
.vv-aspect-3-4 img, .vv-aspect-1-1 img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* ── RESPONSIVE BASE ── */
@media (max-width: 768px) {
    :root { --vv-gutter: 1.4rem; }
    .vv-section    { padding: 4.5rem var(--vv-gutter); }
    .vv-section-sm { padding: 3rem var(--vv-gutter); }
}

/* ── fix cross-browser tipografía display ── */
@media (max-width: 1200px) {
    .vv-display-xl { font-size: 6rem; }
    .vv-display-lg { font-size: 4rem; }
    .vv-display-md { font-size: 2.4rem; }
}
@media (max-width: 900px) {
    .vv-display-xl { font-size: 4rem; }
    .vv-display-lg { font-size: 3rem; }
    .vv-display-md { font-size: 2rem; }
}
@media (max-width: 600px) {
    .vv-display-xl { font-size: 3rem; }
    .vv-display-lg { font-size: 2.2rem; }
    .vv-display-md { font-size: 1.7rem; }
}