/* DEFINICIÓN DE FUENTES (Basado en tus archivos) */
    @font-face {
      font-family: 'Lektorat Display';
      src: url('fonts/LektoratDisplay_var-Upright.woff2') format('woff2-variations');
      font-weight: 100 900;
      font-style: normal;
    }
    @font-face {
      font-family: 'Lektorat Display';
      src: url('fonts/LektoratDisplay_var-Oblique.woff2') format('woff2-variations');
      font-weight: 100 900;
      font-style: italic;
    }
    @font-face {
      font-family: 'Lektorat Text';
      src: url('fonts/LektoratText_var-Upright.woff2') format('woff2-variations');
      font-weight: 100 900;
      font-style: normal;
    }
    @font-face {
      font-family: 'Lektorat Text';
      src: url('fonts/LektoratText_var-Oblique.woff2') format('woff2-variations');
      font-weight: 100 900;
      font-style: italic;
    }

    /* VARIABLES & BASE */
    :root {
      color-scheme: light;
      --bg-main: #00a6a6;
      --text-light: #ffffff;
      --text-dark: #000000;
      --font-display: 'Lektorat Display', sans-serif;
      --font-text: 'Lektorat Text', sans-serif;
      --ease: cubic-bezier(.2,.6,.2,1);
      --medium: 300ms;
    }

     * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-text);
      background: var(--bg-main);
      color: var(--text-light);
      line-height: 1.4;
      overflow-x: hidden;
    }

    /* TÍTULOS Y CABECERA */
    h1, h2, h3, .brand-header {
      font-family: var(--font-display);
    }
    .tit3 {
      max-height: 5rem;
      display: block;
      margin-left: 0;
      margin-right: auto;
    }
    .exp-content p {
      font-size: 1.5rem;
      text-transform: uppercase;
      padding-top: 0.5rem;
      font-weight: 500;
      line-height: 1.2;
    }


    /* HEADER / BRAND */
    .brand-header {
     padding: 40px 24px 20px;
     width: 33%;
     max-width: 280px;
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-bottom: 60px;
    }

    /* LOGO INTERACTIVO */
    .hip-container {
      position: relative;
      width: 100%;
      max-width: 450px;
      margin: 40px auto;
      aspect-ratio: 1.5/1;
      cursor: pointer;
    }

    .hip-container svg, .hip-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity var(--medium) var(--ease);
    }

    .hip-clean { opacity: 0; }
    
    .hip-clean {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      transition:
        opacity 750ms cubic-bezier(.22,.65,.2,1),
        transform 750ms cubic-bezier(.22,.65,.2,1);
    }

    .revealed .hip-clean { opacity: 1; }
    .revealed .hip-collage { opacity: 0; }

     /* Estilo de la tipografía dentro del SVG del logo */
    .hip-container text {
      font-family: var(--font-display);
      font-weight: 900;
    }

    .hero-lockup {
      width: 90%;
      max-width: 600px;
      margin: 0 auto;
    }

    /* TEXTO HERO */
    
    .hero-titles {
      margin-right: 20%;
    }

    .hero-titles img {
      display: block;
      width: 100%;
      max-width: 100%;
    }


    /* CAJA BLANCA (Diseño Editorial) */
    
    .intro-box {
      font-family: 'lektorat-display', system-ui, sans-serif;
      background: white;
      color: var(--bg-main);
      padding: 48px 32px;
      text-align: center;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    .intro-box p {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 400;
      text-align: center;
      margin-bottom: 24px;
      text-transform: uppercase;
      font-variation-settings: 'wght' 50%;

    }

    .intro-box strong { font-weight: 800; }

    .cta-link {
      color: var(--bg-main);
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 700;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .arrow-down {
      width: 36px;
      height: 36px;
      background: var(--bg-main);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform var(--fast);
    }

    .cta-link:hover .arrow-down {
      transform: translateY(5px);
    }

    /* GRILLA DE EXPERIENCIAS */
    .experiences-grid {
      display: grid;
      background: white;
    }

    .experience-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 250px;
      color: var(--text-dark);
      text-decoration: none;
    }

    /* Alternancia de orden en escritorio */
    .experience-card:nth-child(even) {
      direction: rtl;
    }
    .experience-card:nth-child(even) * {
      direction: ltr;
    }

    .exp-content {
      font-family: var(--font-display);
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .exp-content h3 {
      font-family: var(--font-display);
      font-size: 24px;
      text-transform: uppercase;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 8px;
    }

    /* Colores por tarjeta (según imagen) */
    .card-leyendas h3 { color: #4a6fa5; }
    .card-burgas h3 { color: #a52a2a; }
    .card-yoga h3 { color: #d64545; }
    .card-adrenalina h3 { color: #b8860b; }
    .card-encuentros h3 { color: #5d4037; }

    .exp-content p {
      font-size: 14px;
      color: #666;
    }

    .exp-image {
      background-size: cover;
      background-position: center;
      min-height: 200px;
    }

    /* FOOTER / CIERRE */
    .quote-section {
      padding: 80px 24px;
      text-align: center;
      background: var(--bg-main);
    }

    .quote-section h2 {
      font-size: 28px;
      text-transform: uppercase;
      max-width: 600px;
      margin: 0 auto;
    }

    .footer-track {
      position: relative;
      height: 400px;
      background: url('img/predio.jpg') center/cover;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: 40px;
    }

    .footer-track::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
    }

    .footer-info {
      position: relative;
      text-align: center;
      z-index: 1;
    }
    .logo {
      width: 120px;
      margin: 0 auto 16px;
    }
    .address {
      font-family: 'lektorat-text', system-ui, sans-serif;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 200;
      color: var(--text-light);
      text-decoration: none;
    }
    .address_ico {
      width: 20px;
      height: 20px;
      filter: brightness(0) invert(1);
    }

    .social-footer {
      background: var(--bg-main);
      text-align: center;
      margin-top: 12px;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 4px;
      padding: 12px 24px;
    }
  
    .social-icons img {
      width: 24px;
      height: 24px;
      display: block;
    }
    .legal {
      font-size: 10px;
      color: var(--text-light);
      margin: 8px;
    }

    .logos-legal {
      background-color: #ff8189;
      display: flex;
      padding: 4px 24px;
      margin: 0;
      width: 100%;
      justify-content: center;
      align-items: center;
      gap: 30px;
      flex-wrap: wrap;
    }

    .logos-legal img {
      height: 30px;
      filter: brightness(0) invert(0);
    }

    /* RESPONSIVE */
    @media (max-width: 600px) {
      .experience-card {
        grid-template-columns: 1fr;
      }
      .experience-card:nth-child(even) {
        direction: ltr;
      }
      .exp-image {
        order: -1;
      }
    }

    .exp-image {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden; /* Evita que las bandas se vean fuera de la imagen */
}
/* EFECTO DE BANDAS */
.bands-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Permite hacer clic en la imagen a través de las bandas */
}

.band {
  position: absolute;
  height: 100%;
  top: 0;
  opacity: 0.8;
  /* El transform se controla mediante el archivo script.js */
}

.band-wide { width: 30px; opacity: 0.65;}
.band-narrow { width: 7px; margin-left: 45px; opacity: 0.9;}

/* Colores específicos por tarjeta */
.card-leyendas .band { background-color: #4a6fa5; }
.card-burgas .band { background-color: #a52a2a; }
.card-yoga .band { background-color: #d64545; }
.card-adrenalina .band { background-color: #b8860b; }
.card-encuentros .band { background-color: #5d4037; }