/* =========================================================
   AKELA — D-DIN webfonts
   Copiar estos .woff2 en /assets/fonts/
   ========================================================= */

@font-face {
  font-family: "D-DIN";
  src: url("../assets/fonts/D-DIN.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN";
  src: url("../assets/fonts/D-DIN-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN";
  src: url("../assets/fonts/D-DIN-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN Condensed";
  src: url("../assets/fonts/D-DINCondensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN Condensed";
  src: url("../assets/fonts/D-DINCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN Exp";
  src: url("../assets/fonts/D-DINExp.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN Exp";
  src: url("../assets/fonts/D-DINExp-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "D-DIN Exp";
  src: url("../assets/fonts/D-DINExp-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* AKELA - compiled production CSS for IIS
   No Node.js/npm required to serve this file.
   Generated from the Tailwind-oriented source.
*/
@layer base, components, utilities;

@layer utilities {
  .bg-black { background-color: #000; }
  .text-white { color: #fff; }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}



/*
  AKELA / Home
  D-DIN is intentionally not bundled.
  If you have a licensed WOFF2, add it to /assets/fonts and uncomment:

  @font-face {
    font-family: "D-DIN";
    src: url("../assets/fonts/D-DIN.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
*/



@layer base {
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    overflow-x: hidden;
    font-family: "D-DIN", Arial, Verdana, sans-serif;
    background: #000;
    color: #fff;
  }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; }
}

@layer components {
  .skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 100;
    background: #fff;
    color: #000;
    padding: .75rem 1rem;
  }
  .skip-link:focus { top: 1rem; }

  .site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 50;
    height: 100px;
  }
  .header-inner {
    position: relative;
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(24px, 4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
     }
  .brand-word {
    font-size: clamp(1.65rem, 2.1vw, 2.25rem);
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1;
  }
  .desktop-nav {
    display: none;
  }
  .desktop-nav a {
    position: relative;
    padding: 10px 0;
    white-space: nowrap;
  }
  .desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .28s ease;
  }
  .desktop-nav a:hover::after,
  .desktop-nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .menu-toggle {
    display: none;
    margin-left: auto;
    width: 32px;
    height: 32px;
    padding: 7px 3px;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 80;
  }
  .menu-toggle span {
    display: block;
    height: 2px;
    margin: 4px 0;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    z-index: 70;
    top: 0; right: 0;
    width: min(350px, 86vw);
    height: 100dvh;
    padding: 110px 36px 36px;
    background: #000;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-menu.is-open { transform: translateX(0); }
  .mobile-menu nav { display: grid; }
  .mobile-menu a {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.2);
    text-align: right;
    text-transform: uppercase;
    font-size: 15px;
  }
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0,0,0,.5);
  }

  .story {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
  }
  .story-media {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center;
    transform: scale(1.015);
  }
  .story-media--hero {
    background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2400&q=88");
    background-position: center 55%;
  }
  .story-media--baviera {
    background-image: url("../img/baviera/schliersee.jpg");
  }
  .story-media--moto {
    background-image: url("https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=2400&q=88");
  }
  .story-media--escapadas {
    background-image: url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=2400&q=88");
  }
  .story-media--historias {
    background-image: url("https://images.unsplash.com/photo-1464278533981-50106e6176b1?auto=format&fit=crop&w=2400&q=88");
  }
  .story-media--akela {
    background-image: url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2400&q=88");
  }

  .story-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.03) 75%),
      linear-gradient(0deg, rgba(0,0,0,.48) 0%, transparent 46%);
  }
  .story-shade--strong { background: rgba(0,0,0,.48); }

  .story-content {
    position: absolute;
    left: clamp(24px, 5vw, 80px);
    bottom: clamp(70px, 13vh, 150px);
    width: min(680px, calc(100% - 48px));
    z-index: 2;
  }
  .eyebrow {
    margin: 0 0 8px;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.25;
    font-weight: 400;
    text-transform: uppercase;
  }
  .story h1,
  .story h2 {
    margin: 0;
    max-width: 780px;
    font-size: clamp(42px, 4.25vw, 64px);
    line-height: .96;
    letter-spacing: -.025em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .dek {
    max-width: 580px;
    margin: 18px 0 0;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.45;
  }

  .outline-cta {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 164px;
    height: 54px;
    margin-top: 28px;
    border: 2px solid #fff;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .025em;
  }
  .outline-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .outline-cta span { position: relative; z-index: 1; transition: color .28s ease; }
  .outline-cta:hover::before,
  .outline-cta:focus-visible::before { transform: translateY(0); }
  .outline-cta:hover span,
  .outline-cta:focus-visible span { color: #000; }

  .scroll-cue {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 24px;
    width: 30px;
    height: 44px;
    transform: translateX(-50%);
  }
  .scroll-cue span,
  .scroll-cue span::before {
    position: absolute;
    width: 2px;
    height: 22px;
    background: #fff;
  }
  .scroll-cue span { left: 14px; top: 0; animation: scrollDown 1.8s infinite; }
  .scroll-cue span::before {
    content: "";
    left: 0; top: 10px;
    transform: rotate(45deg);
    transform-origin: bottom;
    height: 10px;
  }

  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  .site-footer {
    min-height: 110px;
    display: grid;
    place-items: center;
    background: #000;
  }
  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 28px;
    padding: 30px 24px;
    font-size: 11px;
    font-weight: 700;
  }
  .footer-inner span { color: #777; }

  @keyframes scrollDown {
    0% { transform: translateY(0); opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
  }

  @media (max-width: 960px) {
    .site-header { height: 82px; }
    .desktop-nav { display: none; }
    .menu-toggle { display: block; }
    .brand { min-width: auto; }
    .story-content { bottom: 84px; }
    .story h1, .story h2 { font-size: clamp(38px, 10vw, 54px); }
    .story-shade {
      background:
        linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.06)),
        linear-gradient(0deg, rgba(0,0,0,.62) 0%, transparent 60%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
  }
}

/* =========================================================
   AKELA — SPLIT HERO (consolidado)
   ========================================================= */
.split-hero{position:relative;display:flex;width:100%;max-width:100vw;height:100vh;height:100svh;overflow:hidden;background:#000}
.split-panel{position:relative;flex:1 1 0;min-width:0;height:100%;overflow:hidden;color:#fff;text-decoration:none;background-position:center;background-repeat:no-repeat;background-size:cover;isolation:isolate;transition:flex-grow 650ms cubic-bezier(.2,.7,.2,1),filter 650ms ease}
.split-panel:not(:last-child)::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(255,255,255,.20);z-index:5}
.split-panel--destinos{background-image:url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1400&q=88")}
.split-panel--rutas{background-image:url("https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1400&q=88")}
.split-panel--viajes{background-image:url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1400&q=88")}
.split-panel--historias{background-image:url("https://images.unsplash.com/photo-1464278533981-50106e6176b1?auto=format&fit=crop&w=1400&q=88")}
.split-panel__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.70) 100%);transition:background 500ms ease}
.split-hero:hover .split-panel{flex-grow:1;filter:brightness(.60)}
.split-hero .split-panel:hover{flex-grow:2;filter:brightness(1)}
.split-panel__content{position:absolute;left:clamp(22px,2.6vw,48px);right:clamp(22px,2.6vw,48px);bottom:clamp(60px,10vh,110px);z-index:10;color:#fff;pointer-events:none}
.split-panel__eyebrow{display:block;margin:0 0 10px;font-family:"D-DIN",Arial,Verdana,sans-serif;font-size:14px;font-weight:400;line-height:1;letter-spacing:.08em;color:#fff;opacity:.75}
.split-panel__title{display:block;margin:0;font-family:"D-DIN",Arial,Verdana,sans-serif;font-size:clamp(30px,3vw,48px);font-weight:700;line-height:.95;letter-spacing:-.025em;color:#fff;text-transform:uppercase}
.split-panel__details{display:block;max-height:0;margin-top:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity 400ms ease,transform 500ms cubic-bezier(.2,.7,.2,1),max-height 500ms ease,margin-top 500ms ease,visibility 0s linear 500ms}
.split-panel__details p{margin:0 0 22px;font-family:"D-DIN",Arial,Verdana,sans-serif;font-size:16px;font-weight:400;line-height:1.45;color:#fff}
.split-panel:hover .split-panel__details,.split-panel:focus-visible .split-panel__details{max-height:180px;margin-top:18px;opacity:1;visibility:visible;transform:translateY(0);transition:opacity 400ms ease 100ms,transform 500ms cubic-bezier(.2,.7,.2,1) 100ms,max-height 500ms ease,margin-top 500ms ease,visibility 0s}
.split-panel__cta{display:inline-flex;align-items:center;gap:12px;font-family:"D-DIN",Arial,Verdana,sans-serif;font-size:13px;font-weight:700;line-height:1;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.split-panel__arrow{display:inline-block;font-size:18px;transition:transform 250ms ease}
.split-panel:hover .split-panel__arrow{transform:translateX(6px)}
.split-panel:focus-visible{outline:2px solid #fff;outline-offset:-4px}

@media (max-width:960px){
  .brand{position:static;transform:none;margin-right:auto;min-width:auto}
  .split-hero{flex-direction:column}
  .split-panel{flex:1 1 0;width:100%;min-height:0;background-position:center}
  .split-panel:not(:last-child)::after{top:auto;right:0;bottom:0;left:0;width:auto;height:1px}
  .split-hero:hover .split-panel,.split-hero .split-panel:hover{flex-grow:1;filter:none}
  .split-panel__content{left:24px;right:24px;bottom:22px}
  .split-panel__eyebrow{display:none}
  .split-panel__title{font-size:clamp(27px,8vw,38px)}
  .split-panel__details{display:none}
  .split-panel:first-child .split-panel__content{bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .split-panel,.split-panel__details,.split-panel__arrow,.split-panel__shade{transition:none}
}