/* ========================================================
   Casino Camino Real — Complete Redesign 2026
   White Editorial · Luxury Salon
   ======================================================== */

/* ===== DESIGN TOKENS ===== */
:root {
    --white:     #FFFFFF;
    --cream:     #FAF7F0;
    --cream-d:   #F0EBE0;
    --gold:      #B5862B;
    --gold-d:    #8C6418;
    --gold-l:    #D4A94A;
    --gold-line: rgba(181,134,43,0.30);
    --dark:      #111111;
    --mid:       #555555;
    --light:     #888888;
    --border:    rgba(0,0,0,0.09);

    --font-head: 'Cormorant Garamond', serif;
    --font-body: 'Jost', sans-serif;
    --font-script: 'Dancing Script', cursive;

    --nav-h:  72px;
    --radius: 2px;

    --ease:   cubic-bezier(.25,.46,.45,.94);
    --ease-b: cubic-bezier(.34,1.56,.64,1);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--dark);
    overflow-x: hidden;
    line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    line-height: 1.08;
    font-weight: 500;
}

/* ===== SECTION LABELS ===== */
.section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}
.section-label-left {
    justify-content: flex-start;
}
.rule-line {
    display: inline-block;
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: var(--gold);
}
.label-text {
    font-family: var(--font-body);
    font-size: 0.70rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}
.section-title {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 400;
    color: var(--dark);
    text-align: center;
    margin-bottom: 12px;
}
.section-title.text-left { text-align: left; }
.section-title em {
    font-style: italic;
    color: var(--gold-d);
    font-weight: 300;
}
.section-sub {
    text-align: center;
    color: var(--mid);
    font-size: 0.95rem;
    margin-top: 6px;
    margin-bottom: 48px;
}

/* ===== BUTTONS ===== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--gold);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: var(--radius);
    transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s;
}
.btn-primary:hover {
    background: var(--gold-d);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(181,134,43,0.28);
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--dark);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 13px 32px;
    border-radius: var(--radius);
    border: 1px solid var(--dark);
    transition: background .25s, color .25s, transform .25s var(--ease);
}
.btn-secondary:hover {
    background: var(--dark);
    color: var(--white);
    transform: translateY(-2px);
}
.btn-outline {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    color: var(--gold-d);
    border-radius: var(--radius);
    transition: background .22s, color .22s;
}
.btn-outline:hover {
    background: var(--gold);
    color: var(--white);
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* =====================================================
   NAVBAR
   ===================================================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    height: var(--nav-h);
    background: transparent;
    transition: background .3s, box-shadow .3s;
}
.navbar.scrolled {
    background: rgba(255,255,255,0.97);
    box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.06);
}
.nav-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 32px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
}
.nav-left, .nav-right {
    display: flex;
    align-items: center;
    gap: 0;
}
.nav-right { justify-content: flex-end; }

.nav-link {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    padding: 6px 16px;
    border-radius: var(--radius);
    transition: color .22s, opacity .22s;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.88;
}
.navbar.scrolled .nav-link { color: var(--dark); }
.nav-link:hover, .nav-link.active { opacity: 1; color: var(--gold); }
.navbar.scrolled .nav-link:hover { color: var(--gold); }

/* Center logo */
.nav-logo-center {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .3s var(--ease-b);
}
.nav-logo-center:hover { transform: scale(1.04); }
.nav-logo-img {
    height: 52px;
    width: auto;
    filter: brightness(10);
    transition: filter .3s;
}
.navbar.scrolled .nav-logo-img { filter: none; }

/* Dropdown */
.has-drop { position: relative; }
.drop {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    min-width: 180px;
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 99;
}
.has-drop:hover .drop { display: block; }
.drop li a {
    display: block;
    padding: 11px 20px;
    font-size: 0.76rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--dark);
    transition: background .18s, color .18s;
}
.drop li a:hover { background: var(--cream); color: var(--gold-d); }

/* Reservar CTA */
.nav-btn {
    display: inline-block;
    font-size: 0.70rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 9px 22px;
    border: 1px solid rgba(255,255,255,0.7);
    color: var(--white);
    border-radius: var(--radius);
    margin-left: 8px;
    transition: background .22s, color .22s, border-color .22s;
}
.navbar.scrolled .nav-btn { border-color: var(--gold); color: var(--gold); }
.nav-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--white) !important; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    grid-column: 3;
    justify-self: end;
    align-self: center;
}
.hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--white);
    border-radius: 2px;
    transition: transform .28s, opacity .28s, background .28s;
}
.navbar.scrolled .hamburger span { background: var(--dark); }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.nav-menu-mobile {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0; bottom: 0;
    background: var(--white);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 800;
}
.nav-menu-mobile.open { display: flex; }
.nav-menu-mobile a {
    font-size: 1.5rem;
    font-family: var(--font-head);
    font-weight: 400;
    color: var(--dark);
    padding: 10px 20px;
    letter-spacing: 0.04em;
    transition: color .2s;
}
.nav-menu-mobile a:hover { color: var(--gold); }
.nav-menu-mobile .nav-btn {
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
    font-family: var(--font-body);
    font-size: 0.78rem;
    margin-top: 16px;
    padding: 12px 32px;
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: #080808;
}
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50) 0%,
        rgba(0,0,0,0.28) 40%,
        rgba(0,0,0,0.55) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 24px;
    max-width: 860px;
}

/* CREST — logo entre dos lineas horizontales */
.hero-crest {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 680px;
    margin-bottom: 32px;
}
.crest-rule {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.45);
}
.hero-crest-img {
    width: clamp(180px, 22vw, 280px);
    height: auto;
    filter: brightness(10) drop-shadow(0 0 32px rgba(255,255,255,0.30));
    flex-shrink: 0;
}

/* Headline editorial */
.hero-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    gap: 0;
}
.h-line {
    display: block;
    font-family: var(--font-head);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
    line-height: 1;
}
.h-line:first-child {
    font-size: clamp(1.6rem, 4.5vw, 3.2rem);
    opacity: 0.85;
    margin-bottom: 4px;
}
.h-line-accent {
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #F5D070 0%, #E8B84A 40%, #C09020 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
}
.hero-sub {
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 44px;
    margin-top: 8px;
}
.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-actions .btn-secondary {
    border-color: rgba(255,255,255,0.6);
    color: var(--white);
}
.hero-actions .btn-secondary:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--white);
    color: var(--white);
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.55);
    z-index: 2;
    animation: scrollBob 2.4s ease-in-out infinite;
    transition: color .2s;
}
.hero-scroll:hover { color: var(--white); }
@keyframes scrollBob {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(7px); }
}

/* =====================================================
   INTRO STRIP
   ===================================================== */
.intro-strip {
    background: var(--dark);
    color: rgba(255,255,255,0.60);
    padding: 14px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 0;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 300;
}
.intro-strip .dot { margin: 0 12px; color: var(--gold); opacity: 0.6; }

/* =====================================================
   EVENTOS — 3-column card grid
   ===================================================== */
.eventos-section {
    padding: 96px 32px;
    max-width: 1280px;
    margin: 0 auto;
}
.eventos-section > .section-label { margin-bottom: 16px; }
.eventos-section > .section-title { margin-bottom: 12px; }
.eventos-section > .section-sub { margin-bottom: 48px; }

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.ev-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.ev-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    transform: translateY(-4px);
    z-index: 2;
}

/* Portrait image — tall vertical */
.ev-img-wrap {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    flex-shrink: 0;
}
.ev-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.ev-card:hover .ev-img { transform: scale(1.06); }
.ev-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.22) 0%, transparent 60%);
}

.ev-info {
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    border-top: 1px solid var(--border);
}
.ev-number {
    font-family: var(--font-head);
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 0.18em;
    font-weight: 400;
}
.ev-info h3 {
    font-size: 1.50rem;
    font-weight: 400;
    color: var(--dark);
    margin-bottom: 4px;
}
.ev-info p {
    font-size: 0.86rem;
    color: var(--mid);
    line-height: 1.7;
    flex: 1;
}
.ev-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-d);
    font-weight: 400;
    margin-top: 8px;
    transition: gap .2s, color .2s;
}
.ev-link:hover { gap: 10px; color: var(--gold); }
.ev-link span { font-size: 1.1rem; }

/* Photo-only cards (no ev-info) */
.events-grid-3 .ev-card { border: none; }
.events-grid-3 .ev-img-wrap { aspect-ratio: 3/4; }

.ev-cta {
    text-align: center;
    margin-top: 40px;
}

/* =====================================================
   GALERIA — portrait images, de 3 en 3
   ===================================================== */
.galeria-section {
    background: var(--cream);
    padding: 96px 32px;
}
.galeria-section > .section-label { margin-bottom: 16px; }
.galeria-section > .section-title { margin-bottom: 52px; }

.gallery-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto 12px;
}
.gallery-trio-2 { margin-bottom: 40px; }

.trio-item {
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--cream-d);
}
.trio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease);
}
.trio-item:hover img { transform: scale(1.06); }
.trio-tall { aspect-ratio: 2/3; align-self: stretch; }

.gallery-more {
    text-align: center;
    margin-top: 8px;
}
.gallery-more a {
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-d);
    transition: color .2s;
}
.gallery-more a:hover { color: var(--gold); }

/* =====================================================
   GALERÍA SLIDER
   ===================================================== */
.galeria-section {
    background: var(--cream);
    padding: 96px 0 80px;
}
.galeria-section > .section-label { margin-bottom: 16px; padding: 0 32px; }
.galeria-section > .section-title { margin-bottom: 48px; padding: 0 32px; }

.gslider {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}
.gslider-viewport {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--dark);
}
.gslider-track {
    display: flex;
    transition: transform .55s var(--ease);
    will-change: transform;
}
.gslide {
    min-width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    flex-shrink: 0;
}
.gslide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    image-rendering: auto;
}

/* Mobile portrait slides */
.gslide-mob {
    min-width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    flex-shrink: 0;
}
.gslide-mob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    image-rendering: auto;
}
#gCurrentMob { color: var(--gold); font-weight: 500; }

/* Show/hide per viewport */
.gslider-mobile { display: none; }
.gslider-desktop { display: block; }

/* Arrows */
.gslider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transition: background .2s, transform .2s var(--ease-b), box-shadow .2s;
    z-index: 10;
    cursor: pointer;
}
.gslider-btn:hover {
    background: var(--white);
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    transform: translateY(-50%) scale(1.08);
}
.gslider-prev { left: 0; }
.gslider-next { right: 0; }

/* Counter */
.gslider-counter {
    text-align: center;
    margin-top: 16px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--light);
}
#gCurrent { color: var(--gold); font-weight: 500; }

/* Dots */
.gslider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.gdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cream-d);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background .2s, transform .2s;
    padding: 0;
}
.gdot.active {
    background: var(--gold);
    border-color: var(--gold);
    transform: scale(1.3);
}

/* =====================================================
   NOSOTROS
   ===================================================== */
.nosotros-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 680px;
}
.nosotros-img {
    overflow: hidden;
    position: relative;
}
.nosotros-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nosotros-text {
    padding: 72px 72px 72px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    background: var(--cream);
}
.nosotros-text p {
    font-size: 0.95rem;
    color: var(--mid);
    line-height: 1.8;
}
.amenity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 8px;
}
.amenity-list li {
    font-size: 0.84rem;
    color: var(--dark);
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}
.amenity-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 1px;
    background: var(--gold);
}

/* =====================================================
   PAQUETES
   ===================================================== */
.paquetes-section {
    padding: 96px 32px 80px;
    max-width: 1200px;
    margin: 0 auto;
}
.paquetes-section > .section-title { margin-bottom: 6px; }

.paq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.paq-card {
    border: 1px solid var(--border);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--white);
    position: relative;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
    border-radius: var(--radius);
}
.paq-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.09);
    transform: translateY(-3px);
}
.paq-featured {
    border-color: var(--gold-line);
    background: var(--cream);
    box-shadow: 0 4px 24px rgba(181,134,43,0.08);
}
.paq-tag {
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--white);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 16px;
    white-space: nowrap;
    border-radius: 0 0 4px 4px;
}
.paq-num {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--gold);
    letter-spacing: 0.06em;
}
.paq-card h3 {
    font-size: 1.60rem;
    font-weight: 400;
    color: var(--dark);
}
.paq-desc {
    font-size: 0.82rem;
    color: var(--light);
}
.paq-rule {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 0;
}
.paq-card ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    margin-bottom: 12px;
}
.paq-card ul li {
    font-size: 0.84rem;
    color: var(--mid);
    padding-left: 18px;
    position: relative;
    line-height: 1.4;
}
.paq-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 1px;
    background: var(--gold);
}

.paq-urgency {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
    padding: 20px 28px;
    border: 1px solid var(--gold-line);
    border-radius: var(--radius);
    background: rgba(181,134,43,0.04);
    font-size: 0.84rem;
    color: var(--mid);
    flex-wrap: wrap;
}
.urgency-dot {
    width: 8px; height: 8px;
    background: var(--gold);
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(181,134,43,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(181,134,43,0); }
}
.paq-urgency a {
    margin-left: auto;
    font-size: 0.73rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-d);
    transition: color .2s;
}
.paq-urgency a:hover { color: var(--gold); }

/* =====================================================
   CONTACTO
   ===================================================== */
.contacto-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 680px;
    background: var(--white);
}
.contacto-img {
    position: relative;
    overflow: hidden;
}
.contacto-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contacto-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 48px 32px;
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    gap: 16px;
}
.contacto-logo {
    width: 72px;
    filter: brightness(10);
}
.contacto-info {
    padding: 72px 72px 72px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    background: var(--cream);
}
.c-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.c-item { display: flex; flex-direction: column; gap: 3px; }
.c-label {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 400;
}
.c-item p, .c-item p a {
    font-size: 0.92rem;
    color: var(--dark);
    line-height: 1.6;
}
.c-item a:hover { color: var(--gold-d); }
.c-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.btn-wa { background: #25D366; }
.btn-wa:hover { background: #1BAD52; }
.btn-tel { font-size: 0.78rem; }
.contacto-map {
    margin-top: 12px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
    background: var(--dark);
    color: rgba(255,255,255,0.55);
    padding: 72px 32px 0;
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
    padding-bottom: 56px;
}
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-logo {
    width: 68px;
    filter: brightness(2) sepia(1) saturate(2) hue-rotate(-8deg);
    opacity: 0.75;
}
.footer-tagline {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.footer-cols h4 {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}
.footer-cols ul { display: flex; flex-direction: column; gap: 8px; }
.footer-cols li a, .footer-cols p, .footer-cols p a {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.50);
    line-height: 1.7;
    transition: color .2s;
}
.footer-cols li a:hover, .footer-cols p a:hover { color: var(--gold-l); }
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    justify-content: center;
}
.footer-bottom p {
    font-size: 0.70rem;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.25);
}

/* =====================================================
   WHATSAPP FLOAT
   ===================================================== */
.wa-float {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 800;
    width: 52px;
    height: 52px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0 4px 20px rgba(37,211,102,0.45);
    transition: transform .28s var(--ease-b), box-shadow .28s;
}
.wa-float:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 28px rgba(37,211,102,0.55);
}

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

/* ---- 1100px: Tablet landscape ---- */
@media (max-width: 1100px) {
    .events-grid { grid-template-columns: repeat(2, 1fr); }
    .nosotros-text { padding: 56px 48px; }
    .contacto-info { padding: 56px 48px; }
}

/* ---- 900px: Tablet portrait ---- */
@media (max-width: 900px) {
    .nav-left, .nav-right { display: none; }
    .nav-inner { position: relative; display: flex; justify-content: center; align-items: center; }
    .hamburger { display: flex; position: absolute; right: 20px; }
    .nav-logo-center { position: static; transform: none; }

    .nosotros-section,
    .contacto-section { grid-template-columns: 1fr; }
    .nosotros-img { height: 400px; }
    .nosotros-text { padding: 52px 40px; }
    .contacto-img { height: 360px; }
    .contacto-info { padding: 52px 40px; }

    .paq-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }
    .footer-inner { grid-template-columns: 1fr; gap: 44px; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---- 640px: Mobile ---- */
@media (max-width: 640px) {
    :root { --nav-h: 58px; }

    /* Nav */
    .nav-inner { padding: 0 20px; }
    .nav-logo-img { height: 62px; }
    .hamburger { gap: 5px; }
    .hamburger span { width: 20px; }

    /* Mobile menu animado */
    .nav-menu-mobile {
        padding: 0 32px 40px;
        gap: 0;
        background: var(--white);
        overflow-y: auto;
        animation: menuFadeIn .25s var(--ease) both;
    }
    @keyframes menuFadeIn {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: none; }
    }
    .nav-menu-mobile a {
        font-size: 2.2rem;
        padding: 14px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--border);
        letter-spacing: 0.02em;
    }
    .nav-menu-mobile a:last-of-type { border-bottom: none; }
    .nav-menu-mobile .nav-btn {
        margin-top: 28px;
        padding: 15px 40px;
        font-size: 0.78rem;
        border-radius: var(--radius);
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Hero */
    .hero-content { padding: 0 20px; gap: 0; }
    .hero-crest { gap: 14px; margin-bottom: 20px; max-width: 100%; }
    .hero-crest-img { width: clamp(90px, 26vw, 130px); }
    .crest-rule { max-width: 40px; }
    .hero-headline { margin-bottom: 14px; }
    .h-line:first-child { font-size: clamp(1.1rem, 4vw, 1.6rem); letter-spacing: 0.18em; }
    .h-line-accent { font-size: clamp(2.4rem, 11vw, 3.8rem); }
    .hero-sub { font-size: 0.62rem; letter-spacing: 0.24em; margin-bottom: 32px; margin-top: 6px; }
    .hero-actions {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 100%;
    }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: min(300px, 90vw);
        justify-content: center;
        padding: 16px 20px;
        font-size: 0.76rem;
    }
    .hero-scroll { bottom: 24px; }

    /* Intro strip */
    .intro-strip {
        padding: 11px 16px;
        font-size: 0.60rem;
        letter-spacing: 0.16em;
        gap: 4px 0;
    }
    .intro-strip .dot { margin: 0 7px; }

    /* Eventos */
    .eventos-section { padding: 56px 20px 52px; }
    .eventos-section > .section-sub { margin-bottom: 36px; }
    .events-grid { grid-template-columns: 1fr; gap: 2px; }
    .ev-card { flex-direction: row; height: 160px; }
    .ev-img-wrap {
        width: 130px;
        min-width: 130px;
        aspect-ratio: unset;
        height: 100%;
        flex-shrink: 0;
    }
    .ev-info { padding: 18px 20px; gap: 6px; border-top: none; border-left: 1px solid var(--border); }
    .ev-info h3 { font-size: 1.25rem; line-height: 1.1; }
    .ev-info p { font-size: 0.80rem; line-height: 1.55; }
    .ev-number { font-size: 0.68rem; }
    .ev-link { font-size: 0.68rem; margin-top: 4px; }
    .ev-cta { margin-top: 28px; }
    .ev-cta .btn-outline { width: 100%; text-align: center; padding: 15px; }

    /* Galería slider — full bleed en mobile */
    .galeria-section { padding: 56px 0 52px; }
    .galeria-section > .section-label { padding: 0 20px; }
    .galeria-section > .section-title { padding: 0 20px; margin-bottom: 24px; }
    .section-sub { padding: 0 20px; margin-bottom: 28px; font-size: 0.86rem; }

    /* Switch to mobile portrait gallery */
    .gslider-desktop { display: none; }
    .gslider-mobile { display: block; }

    .gslider { padding: 0; }
    .gslider-viewport { border-radius: 0; }

    .gslider-btn {
        width: 36px; height: 36px;
        background: rgba(255,255,255,0.80);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    .gslider-btn svg { width: 14px; height: 14px; }
    .gslider-prev { left: 10px; }
    .gslider-next { right: 10px; }
    .gslider-dots { margin-top: 14px; gap: 5px; padding: 0 20px; }
    .gdot { width: 5px; height: 5px; }
    .gslider-counter { margin-top: 8px; font-size: 0.68rem; }

    /* Nosotros */
    .nosotros-section { grid-template-columns: 1fr; }
    .nosotros-img { height: 280px; order: -1; }
    .nosotros-text { padding: 44px 20px 48px; gap: 14px; }
    .nosotros-text .section-title { text-align: left; }
    .nosotros-text p { font-size: 0.90rem; }
    .amenity-list { gap: 6px; }
    .amenity-list li { font-size: 0.82rem; }

    /* Paquetes */
    .paquetes-section { padding: 56px 20px 52px; }
    .paq-grid { grid-template-columns: 1fr; max-width: 100%; gap: 12px; margin-top: 36px; }
    .paq-card { padding: 32px 22px 28px; gap: 12px; }
    .paq-card h3 { font-size: 1.45rem; }
    .paq-desc { font-size: 0.80rem; }
    .paq-card ul li { font-size: 0.82rem; }
    .paq-urgency {
        padding: 14px 18px;
        font-size: 0.78rem;
        margin-top: 28px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .paq-urgency a { margin-left: 0; }

    /* Contacto */
    .contacto-section { grid-template-columns: 1fr; }
    .contacto-img { height: 260px; }
    .contacto-info { padding: 44px 20px 48px; gap: 16px; }
    .c-item p, .c-item p a { font-size: 0.88rem; }
    .c-btns {
        flex-direction: column;
        gap: 10px;
        margin-top: 8px;
    }
    .c-btns .btn-primary,
    .c-btns .btn-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 15px 20px;
    }
    .contacto-map { margin-top: 8px; }
    .contacto-map iframe { height: 200px !important; width: 100% !important; }

    /* Footer */
    .footer { padding: 52px 20px 0; }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: 36px;
        text-align: center;
    }
    .footer-brand { align-items: center; }
    .footer-cols { grid-template-columns: 1fr; gap: 28px; text-align: center; }
    .footer-bottom { padding: 16px 0; }
    .footer-bottom p { font-size: 0.66rem; }

    /* WhatsApp float */
    .wa-float { bottom: 20px; right: 20px; width: 48px; height: 48px; }
}

/* ---- 430px: Teléfonos pequeños ---- */
@media (max-width: 430px) {
    .h-line:first-child { font-size: clamp(1rem, 3.8vw, 1.4rem); }
    .h-line-accent { font-size: clamp(2.2rem, 12vw, 3.2rem); }
    .ev-card { height: 148px; }
    .ev-img-wrap { width: 112px; min-width: 112px; }
    .ev-info h3 { font-size: 1.1rem; }
    .paq-card { padding: 28px 18px 24px; }
    .nosotros-text { padding: 40px 18px 44px; }
    .contacto-info { padding: 40px 18px 44px; }
    .eventos-section,
    .paquetes-section { padding: 48px 16px 44px; }
}

/* =====================================================
   PAGE LOAD ANIMATION
   ===================================================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.hero-crest   { animation: fadeUp 1.0s var(--ease) .2s both; }
.hero-sub     { animation: fadeUp .9s var(--ease) .55s both; }
.hero-actions { animation: fadeUp .9s var(--ease) .75s both; }
.hero-scroll  { animation: fadeUp .9s var(--ease) .95s both, scrollBob 2.4s ease-in-out 2s infinite; }