/* ==========================================================================
   La Última Torre · Estilo base
   Paleta extraída del logo y carta oficial.
   ========================================================================== */

:root {
    --green-900: #1a2f22;
    --green-800: #1f3d2e;
    --green-700: #234232;
    --green-600: #2c5141;
    --green-500: #3d6852;
    --green-50:  #e8efea;
    --cream:     #f4eee0;
    --cream-light: #faf6ed;
    --cream-dark: #eae0cc;
    --gold:      #b4853a;
    --rust:      #c84b3b;
    --slate-900: #1f1f1f;
    --slate-700: #3a3a3a;
    --slate-500: #6a6a6a;
    --slate-300: #c2c2c2;
    --slate-200: #e0e0e0;
    --white:     #ffffff;

    --serif:     'Cinzel', 'Cormorant Garamond', serif;
    --serif-text: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --sans:      'Inter', system-ui, -apple-system, sans-serif;

    --shadow-sm: 0 1px 2px rgba(26,47,34,.06), 0 1px 3px rgba(26,47,34,.04);
    --shadow-md: 0 4px 8px -2px rgba(26,47,34,.08), 0 2px 4px -2px rgba(26,47,34,.05);
    --shadow-lg: 0 16px 32px -8px rgba(26,47,34,.14), 0 8px 16px -8px rgba(26,47,34,.08);

    --radius:    10px;
    --radius-lg: 20px;

    --max-w:     1280px;
    --content-w: 980px;

    --header-h:  104px;
}

/* ========== Reveal animations (scroll triggered) ========== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal .phil-card, .reveal .pillar, .reveal .ig-card, .reveal .carta-category, .reveal .contact-info-line {
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible .phil-card,
.reveal.is-visible .pillar,
.reveal.is-visible .ig-card,
.reveal.is-visible .carta-category,
.reveal.is-visible .contact-info-line { opacity: 1; transform: none; }
/* Stagger por hijo */
.reveal.is-visible .phil-card:nth-child(1),
.reveal.is-visible .pillar:nth-child(1),
.reveal.is-visible .carta-category:nth-child(1),
.reveal.is-visible .ig-card:nth-child(1) { transition-delay: 0s; }
.reveal.is-visible .phil-card:nth-child(2),
.reveal.is-visible .pillar:nth-child(2),
.reveal.is-visible .carta-category:nth-child(2),
.reveal.is-visible .ig-card:nth-child(2) { transition-delay: .08s; }
.reveal.is-visible .phil-card:nth-child(3),
.reveal.is-visible .pillar:nth-child(3),
.reveal.is-visible .carta-category:nth-child(3),
.reveal.is-visible .ig-card:nth-child(3) { transition-delay: .16s; }
.reveal.is-visible .carta-category:nth-child(4),
.reveal.is-visible .ig-card:nth-child(4) { transition-delay: .24s; }
.reveal.is-visible .carta-category:nth-child(5),
.reveal.is-visible .ig-card:nth-child(5) { transition-delay: .32s; }
.reveal.is-visible .carta-category:nth-child(6),
.reveal.is-visible .ig-card:nth-child(6) { transition-delay: .40s; }

/* Hovers interactivos */
.phil-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.phil-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.phil-card:hover .icon { background: var(--gold); color: var(--white); transition: all .3s ease; }
.pillar { transition: transform .35s ease, background .35s ease, border-color .35s ease; }
.pillar:hover { transform: translateY(-4px); background: rgba(244,238,224,.08); border-color: rgba(180,133,58,.4); }
.pillar:hover i { color: var(--cream); transition: color .3s ease; transform: scale(1.15); }
.pillar i { transition: transform .3s ease, color .3s ease; display: inline-block; }
.carta-category { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.carta-category:hover { transform: translateY(-4px) scale(1.02); border-color: var(--gold); box-shadow: var(--shadow-md); background: var(--white); }
.carta-category:hover i { transform: scale(1.2); color: var(--gold); transition: all .3s ease; }
.btn-primary, .btn-secondary, .btn-ghost-light, .btn-gold { transition: all .25s ease; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-secondary:hover { transform: translateY(-2px); }
.hero-meta-item strong { transition: transform .3s ease; }
.hero-meta-item:hover strong { transform: scale(1.1); color: var(--gold); }
.contact-info-line { transition: transform .25s ease; }
.contact-info-line:hover { transform: translateX(4px); }
.contact-info-line:hover i { color: var(--gold); transform: scale(1.2); transition: all .25s ease; }
.contact-info-line i { transition: all .25s ease; }
.footer-social a { transition: all .25s ease; }
.footer-social a:hover { transform: translateY(-3px); }
.nav-links a { transition: color .2s ease, transform .2s ease; }
.nav-links a:not(.cta):hover { transform: translateY(-1px); }
/* Respecto al usuario que prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ========== Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--slate-900);
    background: var(--cream-light);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin: 0 0 .6em;
    color: var(--green-800);
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: .04em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: .04em; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

/* ========== Container ========== */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.container.narrow { max-width: var(--content-w); }

/* ========== Eyebrow + Flourish ========== */
.eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    font-family: var(--sans);
    font-size: .75rem; letter-spacing: .28em;
    text-transform: uppercase; font-weight: 600;
    color: var(--gold);
}
.eyebrow::before, .eyebrow::after {
    content: ''; display: inline-block;
    width: 2rem; height: 1px; background: var(--gold);
}
.eyebrow.no-line::before, .eyebrow.no-line::after { display: none; }
.eyebrow.on-dark { color: var(--cream-dark); }
.eyebrow.on-dark::before, .eyebrow.on-dark::after { background: var(--cream-dark); }

.flourish {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; margin: .8rem 0 1.4rem; color: var(--gold);
}
.flourish::before, .flourish::after {
    content: ''; width: 3rem; height: 1px; background: currentColor;
}
.flourish-dot {
    width: 8px; height: 8px; transform: rotate(45deg);
    border: 1px solid currentColor; background: transparent;
}

/* ========== Paper texture background ========== */
.bg-paper {
    background-color: var(--cream-light);
    background-image:
        radial-gradient(circle at 25% 30%, rgba(180,133,58,.04) 0%, transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(35,66,50,.05) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg-cream { background: var(--cream); }
.bg-green { background: var(--green-800); color: var(--cream); }
.bg-green-dark { background: var(--green-900); color: var(--cream); }

/* ========== Buttons ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem; padding: .9rem 1.75rem;
    font-family: var(--sans); font-size: .92rem; font-weight: 600;
    letter-spacing: .04em; border: none; cursor: pointer; transition: all .2s ease;
    border-radius: var(--radius); white-space: nowrap;
}
.btn-primary { background: var(--green-800); color: var(--cream); }
.btn-primary:hover { background: var(--green-900); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--green-800); border: 1.5px solid var(--green-800); }
.btn-secondary:hover { background: var(--green-800); color: var(--cream); }
.btn-ghost-light { background: transparent; color: var(--cream); border: 1.5px solid rgba(244,238,224,.5); }
.btn-ghost-light:hover { background: rgba(244,238,224,.1); border-color: var(--cream); }
.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: #94681e; }
.btn-lg { padding: 1.1rem 2.4rem; font-size: 1rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .82rem; }

/* ========== Header / Navigation ========== */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(250, 246, 237, .92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(35,66,50,.08);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.header.scrolled { box-shadow: 0 1px 12px rgba(26,47,34,.06); }
.header.on-hero {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Body: reserva espacio para el header fixed por defecto.
   En home (con hero) se anula con .has-hero porque el hero se ocupa
   de cubrir bajo el header. */
body { padding-top: var(--header-h); }
/* En home (has-hero) el header crece para mostrar el logo grande (180px
   + nav padding ≈ 212px). Subir --header-h aquí hace que la padding-top
   del .hero (que usa calc(var(--header-h)+4rem)) se ajuste solo. */
body.has-hero { padding-top: 0; --header-h: 212px; }
.header.on-hero .nav-links a { color: var(--cream); }
.header.on-hero .lang-switch { color: rgba(244,238,224,.7); }
.header.on-hero .lang-switch button { color: rgba(244,238,224,.7); }
.header.on-hero .lang-switch button.active { color: var(--cream); border-color: var(--cream); }
.header.on-hero .nav-toggle { color: var(--cream); }

.nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0; gap: 1.5rem;
}
.header { overflow: visible; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img {
    height: 80px; width: auto;
    transition: height .3s ease, margin .3s ease, opacity .25s ease;
}
/* Cuando estamos sobre el hero (header transparente), el logo crece
   pero usa márgenes negativos para NO empujar la altura del header.
   La altura del nav se mantiene → --header-h sigue siendo válido →
   el sticky no se rompe. */
.header.on-hero .nav-logo img {
    /* Sin márgenes negativos: el header on-hero crece naturalmente para
       acomodar el logo grande, y flex centra logo+menu en la misma línea
       → quedan visualmente alineados. Al hacer scroll, el header pierde
       .on-hero y vuelve al logo de 80px (sticky compacto). */
    height: 180px;
    margin: 0;
}

/* Por defecto el logo blanco está oculto en todas partes.
   Solo aparece donde el fondo es oscuro: header en hero, y footer. */
.logo-light { display: none !important; }
.header.on-hero .nav-logo .logo-color { display: none; }
.header.on-hero .nav-logo .logo-light { display: block !important; }
.footer .logo-color { display: none; }
.footer .logo-light { display: inline-block !important; }
.nav-links {
    display: flex; align-items: center; gap: 2rem;
    font-family: var(--sans); font-size: .88rem; font-weight: 500;
    letter-spacing: .05em;
}
.nav-links a { color: var(--green-800); transition: color .15s ease; position: relative; }
.nav-links a:hover { color: var(--gold); }
.nav-links a.cta {
    background: var(--green-800); color: var(--cream);
    padding: .6rem 1.3rem; border-radius: var(--radius);
}
.nav-links a.cta:hover { background: var(--green-900); color: var(--cream); }
.header.on-hero .nav-links a.cta { background: var(--cream); color: var(--green-900); }
.header.on-hero .nav-links a.cta:hover { background: var(--gold); color: var(--white); }

.lang-switch {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--sans); font-size: .75rem; font-weight: 600;
    letter-spacing: .08em; color: var(--slate-500);
}
.lang-switch button {
    background: none; border: 1px solid transparent; color: var(--slate-500);
    padding: .25rem .5rem; border-radius: 6px; font-weight: 600; font-size: .72rem;
    transition: all .15s ease;
}
.lang-switch button.active { color: var(--green-800); border-color: var(--green-800); }
.lang-switch button:hover:not(.active) { color: var(--green-700); }

.nav-toggle {
    display: none; background: none; border: none; padding: .4rem;
    color: var(--green-800); font-size: 1.4rem;
}

/* ========== Hero ========== */
.hero {
    position: relative;
    /* Header es position:fixed, así que no reserva flujo. El hero arranca
       en y=0 naturalmente y la imagen llega hasta el borde superior del
       viewport, con el header flotando encima. */
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    color: var(--cream);
    background:
        linear-gradient(180deg, rgba(26,47,34,.55) 0%, rgba(26,47,34,.75) 60%, rgba(26,47,34,.9) 100%),
        url('/assets/img/hero-portada.jpeg') center 70% / cover no-repeat;
    overflow: hidden;
    padding: calc(var(--header-h) + 4rem) 1.5rem 6.5rem;
    text-align: center;
}
/* Hero corto (mobile horizontal o pantallas bajas): liberar al hero del flecha scroll */
@media (max-height: 820px), (max-width: 768px) {
    .scroll-cue { display: none; }
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(180,133,58,.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(45,82,65,.25) 0%, transparent 60%);
    pointer-events: none;
}
.hero-content { position: relative; z-index: 2; max-width: 880px; }
.hero h1 {
    color: var(--cream);
    font-size: clamp(2.6rem, 6vw, 5rem);
    margin-bottom: .4rem;
}
.hero .lede {
    font-family: var(--serif-text); font-style: italic;
    font-size: clamp(1.2rem, 1.85vw, 1.55rem);
    color: var(--cream);
    max-width: 680px; margin: 0 auto 2.5rem;
    line-height: 1.55;
}
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-meta {
    margin-top: 4rem; padding-top: 2rem;
    border-top: 1px solid rgba(244,238,224,.18);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    max-width: 720px; margin-left: auto; margin-right: auto;
}
.hero-meta-item { text-align: center; }
.hero-meta-item strong {
    display: block; font-family: var(--serif);
    font-size: 1.5rem; color: var(--cream); margin-bottom: .25rem;
    letter-spacing: .05em;
}
.hero-meta-item span {
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(244,238,224,.6);
}
.scroll-cue {
    position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    color: rgba(244,238,224,.5); font-size: .7rem; letter-spacing: .2em;
    text-transform: uppercase; animation: bounce 2.4s ease-in-out infinite;
}
.scroll-cue::after { content: ''; display: block; width: 1px; height: 30px; background: currentColor; margin: .5rem auto 0; }
@keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: .5; }
    50% { transform: translate(-50%, 5px); opacity: 1; }
}

/* ========== Sections ========== */
section { padding: 6rem 0; position: relative; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 4rem; }
.section-head p {
    color: var(--slate-500); font-size: 1.05rem;
    font-family: var(--serif-text); font-style: italic;
}

/* ========== History (split) ========== */
.history { background: var(--cream-light); }
.history .container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 900px) {
    .history .container { grid-template-columns: 1fr; gap: 2.5rem; }
}
.history-media {
    position: relative; min-height: 480px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: url('/assets/img/historia.jpg') center center / cover no-repeat;
}
.history-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,47,34,.05) 0%, rgba(26,47,34,.25) 100%);
    pointer-events: none;
}
.history-media .placeholder { display: none; }
.history-text h2 { margin-bottom: 1.5rem; }
.history-text .est {
    display: inline-block;
    font-family: var(--serif); letter-spacing: .25em;
    font-size: .78rem; color: var(--gold);
    border: 1px solid var(--gold); padding: .25rem .8rem;
    border-radius: 999px; margin-bottom: 1rem; text-transform: uppercase;
}
.history-text p {
    font-family: var(--serif-text); font-size: 1.15rem; line-height: 1.7;
    color: var(--slate-700);
}
.history-text p + p { margin-top: 1rem; }

/* ========== Filosofía (Misión/Visión/Valores) ========== */
.philosophy { background: var(--cream); padding-top: 5rem; }
.philosophy .container { max-width: 1100px; }
.phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
@media (max-width: 900px) { .phil-grid { grid-template-columns: 1fr; gap: 1.25rem; } }
.phil-card {
    background: var(--white); padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(35,66,50,.08);
    text-align: left; transition: transform .25s ease, box-shadow .25s ease;
}
.phil-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.phil-card .icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--green-50); color: var(--green-800);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 1.25rem;
}
.phil-card h3 {
    font-family: var(--serif); letter-spacing: .12em;
    font-size: 1rem; text-transform: uppercase;
    color: var(--green-800); margin-bottom: .8rem;
}
.phil-card p { color: var(--slate-700); font-size: .95rem; line-height: 1.65; margin: 0; }

/* ========== Pillars (banner verde con 3 pilares) ========== */
.pillars {
    background: var(--green-800); color: var(--cream);
    padding: 5rem 0;
    background-image:
        radial-gradient(ellipse at center, rgba(180,133,58,.08) 0%, transparent 60%);
    overflow: hidden;
}
/* Pattern repetitivo del wordmark "La Última Torre" — invertido + screen
   para que el fondo blanco del JPEG desaparezca y queden solo las letras
   en crema sobre verde oscuro. Mantener opacidad muy baja: es textura. */
.pillars::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 30%;
    background-image: url("/Logo/IMG_0956.PNG");
    background-repeat: repeat;
    background-size: 280px auto;
    filter: invert(1);
    mix-blend-mode: screen;
    opacity: .08;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
}
.pillars > .container { position: relative; z-index: 1; }
@media (max-width: 768px) {
    .pillars::after { background-size: 200px auto; opacity: .07; height: 32%; }
}
.pillars-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
@media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.pillar {
    background: rgba(244,238,224,.04);
    border: 1px solid rgba(244,238,224,.12);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    backdrop-filter: blur(2px);
}
.pillar i {
    font-size: 1.5rem; color: var(--gold); margin-bottom: 1rem; display: inline-block;
}
.pillar h3 {
    color: var(--cream); font-family: var(--serif);
    font-size: 1.2rem; letter-spacing: .08em;
    margin-bottom: .6rem;
}
.pillar p { font-family: var(--serif-text); font-size: 1rem; color: rgba(244,238,224,.78); line-height: 1.7; margin: 0; }

/* ========== Carta preview — split text + mockup ========== */
.carta-preview { background: var(--cream-light); padding: 6rem 0; overflow: hidden; }
.carta-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
    max-width: 1100px; margin: 0 auto; align-items: center;
}
@media (max-width: 900px) { .carta-split { grid-template-columns: 1fr; gap: 3rem; text-align: center; } }
.carta-text .eyebrow, .carta-text .eyebrow::before, .carta-text .eyebrow::after { display: inline-block; }
@media (max-width: 900px) {
    .carta-text .eyebrow { justify-content: center; }
}
.carta-text h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 1rem; }
.carta-text p { color: var(--slate-700); font-family: var(--serif-text); font-size: 1.1rem; line-height: 1.7; }
.carta-highlights { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 900px) { .carta-highlights { justify-content: center; } }
.carta-highlights li {
    background: rgba(35,66,50,.06); color: var(--green-800);
    padding: .4rem .9rem; border-radius: 999px;
    font-family: var(--sans); font-size: .78rem; font-weight: 500;
    letter-spacing: .04em; display: inline-flex; align-items: center; gap: .4rem;
}
.carta-highlights li i { color: var(--gold); font-size: .75rem; }

/* Mockup: 3 páginas apiladas con depth */
.carta-mockup {
    position: relative; width: 100%; max-width: 380px;
    aspect-ratio: 3 / 4;
    margin: 0 auto; cursor: pointer;
    perspective: 1200px; transform-style: preserve-3d;
    display: block;
}
.carta-mockup .mock-page {
    position: absolute; inset: 0;
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(26,47,34,.4), 0 12px 25px -8px rgba(26,47,34,.2);
    transition: transform .6s cubic-bezier(.2,.6,.3,1), box-shadow .6s ease;
}
.carta-mockup .mock-page img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.carta-mockup .mock-back  { transform: translate(-32px, 18px) rotate(-7deg); z-index: 1; opacity: .9; }
.carta-mockup .mock-mid   { transform: translate(-14px, 8px)  rotate(-3.5deg); z-index: 2; }
.carta-mockup .mock-front { transform: rotate(0deg); z-index: 3; }
.carta-mockup:hover .mock-back  { transform: translate(-70px, 30px) rotate(-12deg); }
.carta-mockup:hover .mock-mid   { transform: translate(-32px, 16px) rotate(-6deg); }
.carta-mockup:hover .mock-front { transform: translate(8px, -8px) rotate(2deg) scale(1.03); box-shadow: 0 35px 70px -15px rgba(26,47,34,.45); }

.carta-mockup .mock-badge {
    position: absolute; bottom: -1rem; right: -1rem; z-index: 5;
    background: var(--gold); color: var(--white);
    width: 96px; height: 96px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px -6px rgba(180,133,58,.5);
    font-family: var(--serif); font-size: .72rem; letter-spacing: .1em;
    text-align: center; line-height: 1.2; text-transform: uppercase;
    pointer-events: none;
    animation: gentleBounce 3s ease-in-out infinite;
}
.carta-mockup .mock-badge strong { font-size: 1.5rem; display: block; margin-bottom: .15rem; }
@keyframes gentleBounce {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-6px) rotate(-8deg); }
}
@media (max-width: 600px) {
    .carta-mockup { max-width: 280px; }
    .carta-mockup .mock-badge { width: 72px; height: 72px; font-size: .6rem; bottom: -.5rem; right: -.5rem; }
    .carta-mockup .mock-badge strong { font-size: 1.1rem; }
}

/* ========== TikTok reels carousel ========== */
.tiktok-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--green-900) 0%, var(--green-800) 100%);
    color: var(--cream); overflow: hidden;
    position: relative;
}
.tiktok-section::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(180,133,58,.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(45,82,65,.3) 0%, transparent 50%);
    pointer-events: none;
}
.tiktok-section .section-head { position: relative; z-index: 1; }
.tiktok-section h2 { color: var(--cream); }
.tiktok-section .section-head p { color: rgba(244,238,224,.7); }
/* Pattern repetitivo del wordmark "DESDE 1894" — mismo tratamiento que
   el de "LA ÚLTIMA TORRE" en .pillars: invert + screen para que las letras
   queden en crema sobre el verde, ocupando el 30% inferior con fade-in. */
.tiktok-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 30%;
    background-image: url("/Logo/desde-1894.png");
    background-repeat: repeat;
    background-size: 260px auto;
    filter: invert(1);
    mix-blend-mode: screen;
    opacity: .09;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
}
@media (max-width: 768px) {
    .tiktok-section::after { background-size: 180px auto; opacity: .08; height: 32%; }
}
/* Variante EN: "SINCE 1894" en vez de "DESDE 1894" */
html[lang="en"] .tiktok-section::after { background-image: url("/Logo/since-1894.png"); }
.tt-carousel { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 3rem; }
.tt-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 340px;
    gap: 1.25rem;
    /* Ancho exacto = 3 cards + 2 gaps → la 4ª no asoma nada */
    max-width: calc(3 * 340px + 2 * 1.25rem);
    margin: 0 auto;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: .5rem 0 2rem;
    align-items: start;
}
.tt-track::-webkit-scrollbar { display: none; }
/* Card del carousel — ahora video local (antes era iframe del player TikTok) */
.tt-track .tt-card {
    scroll-snap-align: start;
    width: 340px;
    min-width: 340px;
    height: 605px;
    border: 0;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.5);
    transition: transform .35s ease;
    display: block;
    position: relative;
}
.tt-track .tt-card:hover { transform: translateY(-6px); }
.tt-card video {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    background: #111;
    cursor: pointer;
}
.tt-card-link {
    position: absolute;
    top: .65rem; right: .65rem;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(20,20,20,.55);
    color: var(--cream);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    z-index: 3;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .2s ease, transform .2s ease, color .2s ease;
}
.tt-card-link:hover { background: var(--gold); color: var(--green-900); transform: scale(1.08); }

/* Play centrado: solo visible cuando el video está pausado */
.tt-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 0;
    background: rgba(180, 133, 58, .92);
    color: var(--cream);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,.5), inset 0 0 0 1px rgba(244,238,224,.15);
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.tt-play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.tt-play:hover { background: var(--gold); transform: translate(-50%, -50%) scale(1.06); }
.tt-card.is-playing .tt-play { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.85); }

/* Mute toggle: abajo-izquierda, discreto */
.tt-mute {
    position: absolute;
    bottom: .65rem; left: .65rem;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(20,20,20,.45);
    color: var(--cream);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity .25s ease, background .2s ease, transform .2s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tt-mute svg { width: 14px; height: 14px; fill: currentColor; }
.tt-mute:hover { background: var(--gold); color: var(--green-900); transform: scale(1.1); }
.tt-card.is-playing .tt-mute,
.tt-card:hover .tt-mute { opacity: 1; }

/* Barra de progreso fina: gold sobre cream-transparente, abajo */
.tt-progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(244,238,224,.18);
    z-index: 3;
    opacity: 0;
    transition: opacity .25s ease;
}
.tt-progress > span {
    display: block;
    height: 100%; width: 0%;
    background: var(--gold);
    transition: width .12s linear;
}
.tt-card.is-playing .tt-progress { opacity: 1; }
.tt-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 44px; height: 44px; border-radius: 50%;
    background: var(--gold); color: var(--white);
    border: none; cursor: pointer; transition: all .2s ease;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
}
.tt-btn:hover { background: var(--cream); color: var(--green-800); transform: translateY(-50%) scale(1.08); }
.tt-prev { left: 0; }
.tt-next { right: 0; }
@media (max-width: 1024px) {
    .tt-carousel { max-width: 100%; padding: 0 3rem; }
    .tt-track {
        grid-auto-columns: 300px;
        max-width: calc(3 * 300px + 2 * 1rem);
        gap: 1rem;
    }
    .tt-track .tt-card { width: 300px; min-width: 300px; height: 535px; }
}
@media (max-width: 800px) {
    .tt-track {
        grid-auto-columns: 240px;
        max-width: calc(2 * 240px + 1 * 1rem);
    }
    .tt-track .tt-card { width: 240px; min-width: 240px; height: 430px; }
}
@media (max-width: 600px) {
    .tt-carousel { padding: 0 1rem; }
    .tt-track {
        grid-auto-columns: 280px;
        max-width: 280px;
    }
    .tt-track .tt-card { width: 280px; min-width: 280px; height: 500px; }
    .tt-btn { width: 38px; height: 38px; }
}
.tt-cta { text-align: center; margin-top: 1rem; }
.tt-cta a {
    color: var(--cream); border-bottom: 1px solid rgba(244,238,224,.3);
    font-family: var(--sans); font-size: .9rem; padding-bottom: .2rem;
    transition: color .2s ease, border-color .2s ease;
}
.tt-cta a:hover { color: var(--gold); border-color: var(--gold); }

/* ========== Galería (momentos) — fondo blanco ========== */
.gallery-section { padding: 6rem 0; background: var(--white); }
.gallery-section .section-head { margin-bottom: 3rem; }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    height: 600px;
}
.gallery-item {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: transform .4s ease, box-shadow .4s ease;
    cursor: pointer;
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.6,.3,1);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(26,47,34,.7) 100%);
    opacity: 0; transition: opacity .35s ease;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item .caption {
    position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem;
    color: var(--cream);
    font-family: var(--serif); font-size: .9rem; letter-spacing: .04em;
    opacity: 0; transform: translateY(8px);
    transition: opacity .3s ease .1s, transform .3s ease .1s;
    z-index: 2;
}
.gallery-item:hover .caption { opacity: 1; transform: none; }
/* Span asimétrico tipo bento */
.gallery-item.big { grid-column: span 2; grid-row: span 2; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

@media (max-width: 800px) {
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
    .gallery-item { aspect-ratio: 1 / 1; }
    .gallery-item.big { grid-column: span 2; aspect-ratio: 4 / 3; }
    .gallery-item.tall, .gallery-item.wide { grid-column: span 1; grid-row: span 1; }
}

/* ========== Google Reviews — fondo blanco invertido ========== */
.reviews-section {
    padding: 6rem 0; background: var(--white);
}
.reviews-rating-wrap {
    display: flex; align-items: center; justify-content: center; gap: 2rem;
    margin: 0 auto 3rem; flex-wrap: wrap; max-width: 720px;
}
.reviews-google-mark {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .85rem 1.4rem; border-radius: 999px;
    background: var(--white); border: 1px solid rgba(35,66,50,.12);
    box-shadow: var(--shadow-sm); font-family: var(--sans);
    color: var(--slate-900); font-weight: 500;
}
.reviews-google-mark .g-logo {
    width: 22px; height: 22px; display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%; background: conic-gradient(from 0deg, #ea4335, #fbbc05, #34a853, #4285f4, #ea4335);
    color: #fff; font-weight: 700; font-family: 'Inter', sans-serif;
    font-size: .8rem; letter-spacing: -.04em;
}
.reviews-rating-big {
    text-align: center;
}
.reviews-rating-big .num {
    font-family: var(--serif); font-size: 3.5rem; line-height: 1;
    color: var(--gold); font-weight: 600; display: block;
}
.reviews-rating-big .stars {
    color: #f5b400; font-size: 1.1rem; letter-spacing: .15em; margin-top: .3rem;
}
.reviews-rating-big .total {
    color: var(--slate-500); font-size: .85rem; letter-spacing: .05em;
    margin-top: .5rem; font-family: var(--serif-text); font-style: italic;
}

/* Carrusel horizontal con scroll-snap */
.reviews-carousel { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 3rem; }
.rc-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: .5rem 0 2rem;
}
.rc-track::-webkit-scrollbar { display: none; }
.rc-track .review-card { scroll-snap-align: start; min-width: 0; }
@media (min-width: 720px) { .rc-track { grid-auto-columns: calc(50% - .625rem); } }
@media (min-width: 1000px) { .rc-track { grid-auto-columns: calc(33.333% - .833rem); } }
.rc-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5; width: 44px; height: 44px; border-radius: 50%;
    background: var(--green-800); color: var(--cream);
    border: none; cursor: pointer; transition: all .2s ease;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
}
.rc-btn:hover { background: var(--gold); transform: translateY(-50%) scale(1.08); }
.rc-prev { left: 0; }
.rc-next { right: 0; }
@media (max-width: 600px) {
    .reviews-carousel { padding: 0 1rem; }
    .rc-btn { width: 38px; height: 38px; }
    .rc-prev { left: -.5rem; }
    .rc-next { right: -.5rem; }
}

.review-card {
    background: var(--cream); padding: 2rem 1.75rem;
    border-radius: var(--radius-lg); border: 1px solid rgba(35,66,50,.08);
    position: relative; transition: transform .35s ease, box-shadow .35s ease;
    height: 100%;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.review-card::before {
    content: '"'; position: absolute; top: -.5rem; left: 1.25rem;
    font-family: var(--serif); font-size: 5rem; line-height: 1;
    color: var(--gold); opacity: .15; font-weight: 700;
}
.review-stars { color: #f5b400; letter-spacing: .12em; font-size: .95rem; margin-bottom: 1rem; }
.review-text {
    font-family: var(--serif-text); font-size: 1.05rem; line-height: 1.7;
    color: var(--slate-700); margin: 0 0 1.5rem; font-style: italic;
    position: relative; z-index: 1;
}
.review-author {
    display: flex; align-items: center; gap: .75rem;
    padding-top: 1rem; border-top: 1px solid rgba(35,66,50,.08);
}
.review-author .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--green-700); color: var(--cream);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-weight: 600; font-size: .95rem;
    flex-shrink: 0;
}
.review-author .name {
    display: block; font-family: var(--sans); font-weight: 600;
    font-size: .9rem; color: var(--green-800);
}
.review-author .date {
    display: block; font-size: .75rem; color: var(--slate-500);
    font-family: var(--serif-text); font-style: italic;
}
.reviews-actions {
    margin-top: 3rem; display: flex; justify-content: center;
    gap: 1rem; flex-wrap: wrap;
}

/* ========== Instagram section ========== */
/* Oculta temporalmente — repite las mismas fotos que la galería "Momentos".
   Para reactivar: quitar `display: none` de abajo. */
.instagram-section { display: none !important; }
.instagram-section { text-align: center; padding: 5rem 0; }
.ig-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin: 2.5rem auto 0; max-width: 1100px;
}
@media (max-width: 760px) {
    .ig-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
/* La clase hidden-sm ya no es necesaria — todas las fotos visibles siempre */
.ig-card.hidden-sm { display: block; }
.ig-card {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 8px; transition: transform .25s ease;
    display: block;
}
.ig-card:hover { transform: scale(1.04); z-index: 2; box-shadow: var(--shadow-lg); }
.ig-card img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .35s ease;
}
.ig-card:hover img { transform: scale(1.06); }
.ig-card-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--cream); font-size: 2rem;
    background: linear-gradient(180deg, rgba(26,47,34,0) 50%, rgba(26,47,34,.55) 100%);
    opacity: 0; transition: opacity .2s ease;
}
.ig-card:hover .ig-card-overlay { opacity: 1; }
.ig-card-overlay i {
    align-self: flex-end; margin: 0 auto 1rem;
}

/* ========== CTA reservar (banner) ========== */
.cta-reservar {
    background-image:
        linear-gradient(135deg, rgba(26,47,34,.92) 0%, rgba(31,61,46,.86) 100%),
        radial-gradient(circle at 25% 30%, rgba(180,133,58,.15) 0%, transparent 50%);
    background-color: var(--green-900);
    color: var(--cream); text-align: center;
}
.cta-reservar h2 { color: var(--cream); }
.cta-reservar p {
    font-family: var(--serif-text); font-style: italic;
    color: rgba(244,238,224,.8); max-width: 540px; margin: 0 auto 2.5rem;
    font-size: 1.1rem;
}

/* ========== Contact preview ========== */
.contact-preview { background: var(--cream); padding: 5rem 0; }
.contact-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: stretch;
    max-width: 1100px; margin: 0 auto;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { padding: 2rem 0; }
.contact-info-line {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.1rem 0; border-bottom: 1px solid rgba(35,66,50,.08);
}
.contact-info-line:last-child { border-bottom: none; }
.contact-info-line i {
    color: var(--gold); font-size: 1.1rem; width: 24px; text-align: center; margin-top: .15rem;
}
.contact-info-line strong { display: block; color: var(--green-800); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .25rem; }
.contact-info-line span, .contact-info-line a { font-family: var(--serif-text); font-size: 1.15rem; color: var(--slate-700); }
.contact-info-line a:hover { color: var(--gold); }

.hours-card {
    background: var(--green-800); color: var(--cream);
    padding: 2.5rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.hours-card h3 {
    color: var(--cream); font-family: var(--serif);
    font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 1.5rem; padding-bottom: 1rem;
    border-bottom: 1px solid rgba(244,238,224,.15);
}
.hours-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6rem 0; font-family: var(--serif-text); font-size: 1.05rem;
}
.hours-row .day { color: rgba(244,238,224,.65); }
.hours-row .time { color: var(--cream); font-weight: 500; }
.hours-row.closed .time { color: rgba(244,238,224,.45); font-style: italic; }
.hours-row.today { color: var(--gold); }
.hours-row.today .day, .hours-row.today .time { color: var(--gold); }

/* ========== Footer ========== */
.footer {
    background: var(--green-900); color: var(--cream-dark);
    padding: 4rem 0 1.5rem;
}
/* Footer minimal: solo la fila de copyright, sin grid de arriba */
.footer.footer-minimal { padding: 1.75rem 0; }
.footer.footer-minimal .footer-bottom {
    border-top: 0; padding-top: 0;
}
@media (max-width: 600px) {
    .footer.footer-minimal .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}

/* ========== PhotoSwipe (zoom de la carta) — paleta de marca ========== */
.pswp {
    --pswp-bg: var(--green-900);
    --pswp-placeholder-bg: #18271e;
    --pswp-icon-color: var(--cream);
    --pswp-icon-color-secondary: var(--green-900);
    --pswp-icon-stroke-color: rgba(244,238,224,.25);
    --pswp-icon-stroke-width: 1.5px;
}
.pswp__counter,
.pswp__button { color: var(--cream); }
.pswp__button:hover { color: var(--gold); }
.pswp__button--zoomed-in,
.pswp__zoom-wrap { cursor: grab; }
.pswp__top-bar { background: linear-gradient(180deg, rgba(0,0,0,.4), transparent); }

/* ========== Iconos sociales (inline en contacto/footer) ========== */
.social-icons {
    display: flex; gap: .6rem;
    margin-top: .35rem;
    flex-wrap: wrap;
}
.social-icons a {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(35, 66, 50, .06);
    border: 1px solid rgba(35, 66, 50, .12);
    color: var(--green-800);
    font-size: 1rem;
    transition: all .25s ease;
    text-decoration: none;
}
.social-icons a:hover {
    background: var(--gold); border-color: var(--gold);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(180,133,58,.5);
}
.footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem;
    margin-bottom: 3rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.footer-grid img { height: 92px; margin-bottom: 1.25rem; opacity: .95; width: auto; }
.footer h4 {
    color: var(--cream); font-family: var(--serif);
    font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .55rem; font-size: .9rem; color: rgba(244,238,224,.65); }
.footer a { color: rgba(244,238,224,.65); transition: color .15s ease; }
.footer a:hover { color: var(--gold); }
.footer-bottom {
    border-top: 1px solid rgba(244,238,224,.1);
    padding-top: 1.5rem; font-size: .78rem;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    color: rgba(244,238,224,.4);
}
.footer-bottom a { color: rgba(244,238,224,.4); }
.footer-social { display: flex; gap: .75rem; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(244,238,224,.2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s ease;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

/* ========== Floating WhatsApp ========== */
.wa-float {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 80;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; text-decoration: none;
    box-shadow: 0 8px 24px rgba(37,211,102,.4);
    transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: #25d366; opacity: .4; z-index: -1;
    animation: wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse {
    0% { transform: scale(1); opacity: .4; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ========== Carta page (flipbook) ========== */
.carta-page {
    min-height: calc(100vh - 80px);
    background: var(--green-900);
    color: var(--cream);
    padding: 3rem 1.5rem 6rem;
    background-image: radial-gradient(ellipse at center top, rgba(180,133,58,.08) 0%, transparent 60%);
}
.carta-header { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.carta-header h1 { color: var(--cream); }
.carta-header p { color: rgba(244,238,224,.65); font-family: var(--serif-text); font-style: italic; }
.carta-controls {
    display: flex; gap: 1rem; justify-content: center; align-items: center;
    flex-wrap: wrap; margin: 0 auto 2.5rem;
}
.carta-controls .btn { font-size: .85rem; padding: .65rem 1.3rem; }
.flipbook-wrap {
    max-width: 1100px; margin: 0 auto;
    display: flex; justify-content: center;
    padding: 1rem;
}
#flipbook {
    background: transparent;
    box-shadow: 0 30px 60px -10px rgba(0,0,0,.5), 0 18px 36px -18px rgba(0,0,0,.6);
}
#flipbook .page { background: var(--cream-light); }
#flipbook .page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carta-page-counter {
    color: rgba(244,238,224,.6); text-align: center; margin-top: 1.5rem;
    font-family: var(--serif-text); font-size: 1rem; letter-spacing: .1em;
    display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap;
}
/* Hint de zoom (inline en el counter): solo texto + ícono, no botón */
.zoom-hint {
    display: inline-flex; align-items: center; gap: .5rem;
    color: rgba(244,238,224,.55);
    font-family: var(--sans); font-size: .78rem; letter-spacing: .06em;
    text-transform: uppercase;
}
.zoom-hint i { color: var(--gold); font-size: .85rem; }
.flipbook-wrap { touch-action: pan-y; }

/* ========== Reservas page ========== */
.reservas-page {
    background: var(--cream-light);
    min-height: calc(100vh - 80px);
    padding: 4rem 0;
}
.reservas-grid {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: stretch;
    max-width: 1100px; margin: 0 auto;
}
@media (max-width: 900px) { .reservas-grid { grid-template-columns: 1fr; gap: 2rem; } }
.reservas-aside {
    background: linear-gradient(180deg, var(--green-800) 0%, var(--green-900) 100%);
    color: var(--cream); padding: 3rem 2.5rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.reservas-aside::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .6; pointer-events: none;
}
.reservas-aside h2 { color: var(--cream); position: relative; }
.reservas-aside p, .reservas-aside li { position: relative; }
.reservas-aside ul { list-style: none; padding: 0; margin: 2rem 0 0; }
.reservas-aside li {
    padding: 1rem 0; font-family: var(--serif-text); font-size: 1.05rem;
    border-bottom: 1px solid rgba(244,238,224,.1);
    display: flex; align-items: start; gap: .9rem;
}
.reservas-aside li:last-child { border-bottom: none; }
.reservas-aside li i { color: var(--gold); margin-top: .15rem; }
.reservas-form {
    background: var(--white); padding: 3rem 2.5rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); border: 1px solid rgba(35,66,50,.06);
}
.reservas-form h2 { font-size: 2rem; }
.form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; margin-top: 2rem;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
    font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; font-weight: 600;
    color: var(--green-800); margin-bottom: .55rem;
}
.form-field input, .form-field select, .form-field textarea {
    border: none; border-bottom: 1px solid var(--slate-300);
    padding: .65rem 0; font-family: var(--serif-text); font-size: 1.1rem;
    color: var(--slate-900); background: transparent;
    transition: border-color .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-bottom-color: var(--green-800);
}
.form-field textarea { resize: vertical; min-height: 84px; }
.form-actions { margin-top: 2.5rem; }
.form-actions .btn { width: 100%; }
.form-note {
    margin-top: 1.2rem; font-size: .82rem; color: var(--slate-500);
    font-family: var(--serif-text); font-style: italic; text-align: center;
}

/* ========== Contacto page ========== */
.contacto-page {
    background: var(--cream-light); padding: 4rem 0;
    min-height: calc(100vh - 80px);
}
.contacto-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
    max-width: 1100px; margin: 0 auto 3rem;
}
@media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; } }
.contacto-card {
    background: var(--white); padding: 2.5rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); border: 1px solid rgba(35,66,50,.06);
}
.contacto-card.dark {
    background: var(--green-800); color: var(--cream);
}
.contacto-card.dark h3 { color: var(--cream); }
.map-frame {
    width: 100%; height: 420px; border: none; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 1100px; margin: 0 auto; display: block;
}

/* ========== Mobile nav ========== */
@media (max-width: 800px) {
    .nav-toggle { display: block; }

    /* Dropdown mobile: el JS lo mueve a body como hijo directo para
       escaparse del stacking context del header. Aquí estilo de panel
       full-screen sólido. */
    .nav-links.nav-links--mobile {
        position: fixed !important;
        top: var(--header-h); right: 0; bottom: 0; left: 0;
        background: #faf6ed !important;
        background-color: #faf6ed !important;
        display: flex !important;
        flex-direction: column; gap: 0; padding: 2rem; align-items: stretch;
        transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 2147483647; /* máximo entero — encima de todo */
        box-shadow: -12px 0 32px rgba(26,47,34,.18);
        overflow-y: auto;
        opacity: 1; filter: none;
    }
    .nav-links.nav-links--mobile.open { transform: translateX(0); }

    /* Backdrop oscuro detrás del dropdown abierto */
    body.nav-open::before {
        content: '';
        position: fixed;
        inset: var(--header-h) 0 0 0;
        background: rgba(26,47,34,.45);
        backdrop-filter: blur(4px);
        z-index: 2147483646;
        animation: fadeIn .28s ease;
    }
    @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

    /* Evitar scroll del body mientras el menú está abierto */
    body.nav-open { overflow: hidden; }
    .nav-links a {
        padding: 1rem 0; border-bottom: 1px solid rgba(35,66,50,.08);
        font-size: 1.05rem;
    }
    /* En mobile el dropdown siempre tiene fondo cream-light, así que el
       texto SIEMPRE debe ser verde oscuro — anula el color cream del
       estado on-hero (que es para desktop sobre la foto del palacio). */
    .nav-links a,
    .header.on-hero .nav-links a {
        color: var(--green-800) !important;
    }
    .nav-links a:hover,
    .header.on-hero .nav-links a:hover {
        color: var(--gold) !important;
    }
    .nav-links a.cta {
        margin-top: 1rem; text-align: center;
        background: var(--green-800) !important;
        border: none;
    }
    .nav-links a.cta,
    .header.on-hero .nav-links a.cta {
        color: var(--cream) !important;
    }
    .header.on-hero .nav-toggle { color: var(--cream); }
    /* Lang switcher centrado dentro del dropdown mobile */
    .nav-links--mobile .lang-switch {
        margin: 2rem auto 0 !important;
        justify-content: center;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(35,66,50,.1);
        width: 100%;
    }
    .nav-links--mobile .lang-switch button {
        color: var(--green-800) !important;
        border-color: var(--green-800) !important;
        font-size: .9rem;
        padding: .4rem .8rem;
    }
}

/* ========== Marca de agua "torre" (sutil, para secciones con fondo oscuro) ==========
   Uso: añadir class="has-pattern" a la sección. Imagen en /Logo/pattern.png (RGBA).
   El filter invierte el trazo negro → crema para que pegue sobre verde oscuro. */
.has-pattern { overflow: hidden; }
.has-pattern::before {
    content: "";
    position: absolute;
    right: -4%;
    bottom: -10%;
    width: min(720px, 60%);
    aspect-ratio: 822 / 471;
    background: url("/Logo/pattern.png") no-repeat center / contain;
    opacity: .09;
    filter: invert(1);
    pointer-events: none;
    z-index: 0;
}
.has-pattern > .container,
.has-pattern > .carta-header,
.has-pattern > .carta-controls,
.has-pattern > .flipbook-wrap,
.has-pattern > .carta-page-counter { position: relative; z-index: 1; }

/* Variante para fondo claro: sin invertir (líneas negras a baja opacidad,
   efecto "boceto a lápiz"), y centrada verticalmente al lado derecho. */
.has-pattern--light::before {
    filter: none;
    opacity: .07;
    right: -6%;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .has-pattern::before {
        right: -20%;
        bottom: -6%;
        width: 90%;
        opacity: .07;
    }
    .has-pattern--light::before {
        right: -25%;
        top: 55%;
        opacity: .05;
    }
}

/* ========== Salones (Espacios) ========== */
.salones-section { background: var(--cream); }
.salones-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
@media (max-width: 900px) { .salones-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.salon-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .35s ease, box-shadow .35s ease;
    display: flex; flex-direction: column;
}
.salon-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.salon-media { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.salon-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.salon-card:hover .salon-media img { transform: scale(1.05); }
.salon-body { padding: 1.6rem 1.5rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.salon-body h3 { font-family: var(--serif); font-size: 1.45rem; color: var(--green-800); margin-bottom: .6rem; }
.salon-body p { color: var(--slate-700); line-height: 1.6; flex: 1; margin-bottom: 1rem; font-size: .98rem; }
.salon-tag {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--serif); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold); border: 1px solid var(--gold);
    padding: .35rem .9rem; border-radius: 999px; align-self: flex-start;
}
.salon-tag i { font-size: .9rem; }

/* ========== Eventos (split CTA) ========== */
.eventos-section { background: var(--green-800); color: var(--cream); padding: 6rem 0; }
.eventos-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
@media (max-width: 900px) { .eventos-split { grid-template-columns: 1fr; gap: 2.5rem; } }
.eventos-text h2 { margin-bottom: 1.2rem; }
.eventos-text p { color: rgba(244,238,224,.85); font-family: var(--serif-text); font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.5rem; }
.eventos-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; }
@media (max-width: 600px) { .eventos-list { grid-template-columns: 1fr; } }
.eventos-list li { display: flex; align-items: center; gap: .75rem; color: var(--cream); }
.eventos-list i { color: var(--gold); width: 1.4rem; font-size: 1rem; text-align: center; }
.eventos-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}
.eventos-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; display: block; }
.eventos-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(26,47,34,.25) 0%, transparent 60%);
    pointer-events: none;
}

/* ========== Galería completa (galeria.html) ========== */
.gal-hero {
    padding: 4rem 1.5rem 4rem;
    background: var(--green-800);
    color: var(--cream);
    text-align: center;
}
.gal-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: .8rem; }
.gal-hero p { color: rgba(244,238,224,.85); max-width: 640px; margin: 0 auto; font-family: var(--serif-text); font-size: 1.15rem; }

.gal-tabs {
    display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
    padding: 2rem 1rem 0; background: var(--cream-light); position: sticky; top: var(--header-h); z-index: 30;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.gal-tab {
    background: transparent; border: 1px solid transparent; color: var(--slate-700);
    padding: .55rem 1.2rem; border-radius: 999px;
    font-family: var(--serif); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
    cursor: pointer; transition: all .25s ease; text-decoration: none;
}
.gal-tab:hover { color: var(--green-800); border-color: var(--green-700); }
.gal-tab.active { background: var(--green-800); color: var(--cream); border-color: var(--green-800); }

.gal-section { padding: 4rem 0 6rem; background: var(--cream-light); }
.gal-section + .gal-section { padding-top: 2rem; }
.gal-section-head { text-align: center; margin-bottom: 3rem; }
.gal-section-head h2 { margin-bottom: .5rem; }
.gal-section-head p { color: var(--slate-700); font-family: var(--serif-text); }

.gal-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
}
@media (max-width: 1000px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .gal-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } }
.gal-grid a {
    display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-md);
    background: #ddd; position: relative; cursor: zoom-in;
}
.gal-grid a img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.gal-grid a:hover img { transform: scale(1.08); }
.gal-grid a::after {
    content: '\f00e'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; bottom: .8rem; right: .8rem;
    color: #fff; background: rgba(31,61,46,.85);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    opacity: 0; transform: translateY(8px); transition: all .3s ease;
    pointer-events: none;
}
.gal-grid a:hover::after { opacity: 1; transform: translateY(0); }

/* PhotoSwipe overrides para que respete branding */
.pswp { --pswp-bg: #1a2f22; --pswp-icon-color: #f4eee0; }