/* ===================================
   AFTERSURFGUIDE — RESPONSIVE
   Tablet ≥768px and Desktop ≥1100px only.
   All mobile base styles live in style.css.
   =================================== */

/* ===================================
   TABLET (≥768px)
   =================================== */
@media (min-width: 768px) {

  /* Remove bottom-nav padding (now on footer) */
  body { padding-bottom: 0; }
  #main-content { padding-bottom: 0; }
  .footer { padding-bottom: 36px; }

  .container { padding: 0 32px; }
  .section { padding: 80px 0; }

  /* Show top navbar, hide mobile-only elements */
  .navbar { display: block; }
  .mobile-header { display: none; }
  .bottom-nav { display: none; }
  .exp-sequence-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin: 0 32px 44px;
  }
  .exp-sequence-link + .exp-sequence-link { border-top: 0; }
  .exp-sequence-link--next { grid-column: 2; }


  /* ---- NAVBAR ---- */
  .navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 26px 0;
    transition: background 0.3s ease, padding 0.3s ease;
    pointer-events: none; /* la franja es full-width pero solo .nav-container tiene contenido — sin esto tapa .lang-switch */
  }
  /* En tablet la Home aún no carga vídeo y las páginas editoriales empiezan
     sobre arena clara. La barra oscura evita enlaces blancos sin contraste. */
  body.page-home .navbar,
  body.page-nosotros .navbar,
  body.page-faq .navbar,
  body.page-cookies .navbar,
  body.page-spots .navbar {
    padding: 16px 0;
    background: var(--bg-dark);
  }
  .navbar.scrolled {
    background: var(--bg-dark);
    padding: 16px 0;
  }
  .nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
  }
  .nav-language-compact { display: block; }
  .nav-language-full { display: none; }
  .logo {
    display: inline-flex;
    align-items: center;
  }
  /* logo-mark: 36px on desktop (overrides 32px from mobile base) */
  .logo-mark { height: 36px; }
  .nav-links {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static;
    background: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 36px;
    transform: none;
  }
  .nav-links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    transition: color 0.2s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-links a:hover,
  .nav-links a.active { color: var(--white); }

  /* ---- HERO ---- */
  .hero { padding: 100px 48px 80px; }
  .hero-content h1 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }
  .hero-scroll { bottom: 32px; }

  /* ---- FEATURED CARDS ---- */
  .featured-head { padding: 0 32px; }
  .exp-swiper {
    padding-inline: 32px !important;
    box-sizing: border-box;
  }

  /* ---- SPOT CAROUSEL ---- */
  .map-teaser { padding: 72px 0 58px; }
  .map-teaser-head,
  .map-teaser-actions { padding-inline: 32px; }
  .map-teaser-carousel-frame {
    padding-inline: 32px;
    box-sizing: border-box;
  }
  .spot-swiper .swiper-slide {
    width: 340px;
    max-width: 340px;
  }
  /* ---- PAGE LEAD ---- */
  .page-lead { padding: 130px 0 60px; }

  /* ---- ABOUT ---- */
  .values-section { padding: 0 0 88px; }
  .values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }
  .value-item {
    padding: 44px 40px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-top: none;
  }
  .value-item:first-child {
    grid-column: 1 / -1;
  }

  .familia-founders {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(40px, 7vw, 72px);
  }
  .familia-founders .familia-item {
    flex: 0 1 320px;
    min-width: 0;
  }
  .familia-founders .familia-item p { max-width: 32ch; }

  .page-faq .faq-list {
    width: 100%;
    max-width: 840px;
  }

  /* ---- FOOTER ---- */
  .footer { padding: 52px 0 36px; }
  .footer-faq-mobile { display: none; } /* .footer-nav ya incluye FAQ desde aquí */
  .footer-inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    flex-direction: unset;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
  }
  .footer-nav a {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.78);
    transition: color 0.2s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-nav a:hover { color: var(--white); }

  /* ---- EXPERIENCE DETAIL ---- */
  .exp-video-hero { height: 78vh; min-height: 400px; }
  .exp-description { max-width: 65ch; }
  .exp-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .exp-gallery-item { aspect-ratio: 3/4; }
  .exp-gallery-item.wide {
    grid-column: span 2;
    aspect-ratio: 16/9;
  }

  /* La ficha operativa pasa al lateral solo cuando texto y datos conservan
     una medida de lectura cómoda. En tablet estrecha permanece apilada. */
  @media (min-width: 900px) and (max-width: 1099px) {
    .exp-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(250px, 280px);
      gap: clamp(32px, 4vw, 44px);
      align-items: start;
    }
    .exp-layout > div { min-width: 0; }
    .exp-description { max-width: 65ch; }

    /* Cuatro columnas evitan que el ancho extra de tablet horizontal se
       convierta en imágenes 3:4 excesivamente altas. */
    .exp-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Sticky CTA hidden on tablet+ — reset extra bottom padding too */
  .exp-sticky-cta { display: none; }
  .exp-final-cta { padding-bottom: 72px; }

  /* ---- SPOTS ---- */
  /* Restaurar layout normal en tablet */
  body.page-spots .page-lead  { display: block; }
  body.page-spots .footer     { display: block; }
  body.page-spots #main-content {
    height: auto;
    display: block;
    overflow: visible;
  }

  /* Section */
  .spots-section {
    height: calc(100vh - 68px);
    min-height: 520px;
    overflow: hidden;
    position: relative;
  }

  /* Layout: ocupa TODA la sección (filtros y sidebar fuera del flujo) */
  .spots-layout {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    height: 100%;
  }
  /* Ocultar elementos solo-móvil */
  .spots-geo-fab       { display: none; }
  .spots-drawer-handle { display: none; }
  .spots-drawer-count  { display: none; }
  /* Drawer: columna estática izquierda (no display:contents) */
  .spots-drawer {
    display: flex;
    flex-direction: column;
    order: -1;
    position: static;
    width: 280px;
    flex-shrink: 0;
    height: auto;
    transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    border-right: 1px solid var(--border);
    z-index: auto;
    overflow: hidden;
  }
  /* Sidebar: rellena el drawer */
  .spots-sidebar {
    display: block;
    width: 280px; /* fija para evitar que los items colapsen durante la transición */
    flex: 1;
    height: auto;
    overflow-y: auto;
    pointer-events: auto;
    visibility: visible;
    background: var(--bg);
    border-top: none;
    border-right: none;
    padding-top: 0;
  }
  .spots-sidebar * { visibility: visible !important; }
  .spots-drawer[data-state="peek"] .spots-sidebar {
    pointer-events: auto;
    overflow-y: auto;
  }
  .spots-drawer[data-state="peek"] .spots-sidebar * { visibility: visible !important; }
  .spots-sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }

  /* Toggle panel: pastilla en el borde derecho del drawer */
  .spots-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 280px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: 0 1px 6px rgba(0,0,0,0.14);
    cursor: pointer;
    z-index: 25;
    transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1), background 0.18s;
    color: var(--ink-light);
  }
  .spots-panel-toggle:hover { background: var(--bg-dark); color: #fff; border-color: var(--bg-dark); }
  .spots-panel-toggle svg { transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; }

  /* Estado colapsado a 768px */
  .sidebar-collapsed .spots-drawer { width: 0; border-right: none; }
  .sidebar-collapsed .spots-panel-toggle {
    left: 8px;
    transform: translate(0, -50%);
  }
  .sidebar-collapsed .spots-panel-toggle svg { transform: rotate(180deg); }

  /* Mapa: posición relativa, flex:1 */
  .spots-map {
    position: relative;
    inset: unset;
    flex: 1;
    height: auto;
    min-height: 0;
  }
  .spots-map .leaflet-bottom { bottom: 0; }
  .spots-section.drawer-mid  .spots-map .leaflet-bottom,
  .spots-section.drawer-full .spots-map .leaflet-bottom { bottom: 0; }
}

/* TABLET DE POCA ALTURA: la portada deja de ser una pila alta y reparte
   promesa, explicación y acciones en dos columnas aptas para touch. */
@media (min-width: 768px) and (max-width: 1099px) and (max-height: 650px) {
  .hero {
    min-height: 100svh;
    align-items: stretch;
    padding: 76px 40px 24px;
    text-align: left;
  }
  .hero-content {
    width: 100%;
    max-width: 960px;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    grid-template-areas:
      'logo copy'
      'eyebrow copy'
      'title actions';
    align-items: end;
    gap: 8px 40px;
  }
  .hero-logo {
    grid-area: logo;
    justify-self: start;
    height: 64px;
    margin-bottom: 4px;
  }
  .hero-eyebrow { grid-area: eyebrow; margin-bottom: 0; }
  .hero-content h1 {
    grid-area: title;
    margin-bottom: 0;
    font-size: clamp(2.15rem, 4.4vw, 2.8rem);
  }
  .hero-sub {
    grid-area: copy;
    align-self: end;
    max-width: 46ch;
    margin: 0;
    line-height: 1.6;
  }
  .hero-actions {
    grid-area: actions;
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
  }
  .hero-cta-primary { width: auto; white-space: nowrap; }
  .hero-scroll { display: none; }
}

/* El mapa en tablet comparte el primer viewport con una introducción compacta.
   El copy permanece visible, pero deja de anteponer casi media pantalla al uso. */
@media (min-width: 768px) and (max-width: 1099px) {
  body.page-spots .navbar {
    padding: 16px 0;
    background: var(--bg-dark);
  }
  body.page-spots .page-lead {
    display: block;
    flex: 0 0 auto;
    padding: 84px 0 18px;
  }
  body.page-spots .page-lead .container {
    display: grid;
    grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
    align-items: end;
    gap: 32px;
  }
  body.page-spots .spots-lead-heading,
  body.page-spots .spots-lead-copy { min-width: 0; }
  body.page-spots .page-lead .label { margin-bottom: 8px; }
  body.page-spots .page-lead h1 {
    font-size: clamp(2.1rem, 4.2vw, 2.55rem);
    line-height: 1.08;
  }
  body.page-spots .page-lead p {
    max-width: 62ch;
    font-size: 0.9rem;
    line-height: 1.58;
  }
  body.page-spots .page-lead p + p { margin-top: 8px; }
  body.page-spots .footer { display: none; }
  body.page-spots #main-content {
    height: 100svh;
    min-height: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.page-spots .spots-section {
    flex: 1;
    height: auto;
    min-height: 0;
  }
}

@media (min-width: 768px) and (max-height: 600px) and (orientation: landscape) {
  body.page-spots .page-lead,
  body.page-spots .footer { display: none; }

  body.page-spots .navbar { background: var(--bg-dark); }

  body.page-spots #main-content {
    height: calc(100svh - var(--navbar-h-tablet));
    min-height: 0;
    margin-top: var(--navbar-h-tablet);
    padding-bottom: 0;
    display: flex;
    overflow: hidden;
  }

  body.page-spots .spots-section {
    flex: 1;
    height: auto;
    min-height: 0;
  }
}

/* Los tres valores ya caben como una fila completa sin comprimir el copy. */
@media (min-width: 900px) {
  .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .value-item:first-child { grid-column: auto; }
}

/* ===================================
   DESKTOP (≥1100px)
   =================================== */
@media (min-width: 1100px) {

  /* Navbar desktop: materialización suave sin animar propiedades de layout */
  .navbar,
  .navbar.scrolled {
    padding: 16px 0;
    background: transparent;
    transition: none;
    isolation: isolate;
  }
  /* La Home recupera la transparencia cinematográfica cuando ya existe vídeo. */
  body.page-home .navbar,
  body.page-home .navbar.scrolled { background: transparent; }
  .navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(11, 28, 45, 0.94);
    border-bottom: 1px solid rgba(227, 185, 106, 0.1);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    opacity: var(--navbar-reveal, 0);
    transform: translateY(var(--navbar-surface-y, -4px));
    box-shadow: 0 8px 24px rgba(8, 19, 31, calc(var(--navbar-reveal, 0) * 0.28));
    transition: none;
    pointer-events: none;
  }
  .navbar .nav-container {
    position: relative;
    z-index: 1;
    transform: translateY(var(--navbar-content-y, 10px));
    transition: none;
  }

  /* Las páginas editoriales empiezan sobre arena clara: la chrome oscura
     debe estar presente desde el primer frame, sin depender del scroll. */
  body.page-nosotros .navbar::before,
  body.page-faq .navbar::before,
  body.page-cookies .navbar::before {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 8px 24px rgba(8, 19, 31, 0.28);
  }
  body.page-nosotros .navbar .nav-container,
  body.page-faq .navbar .nav-container,
  body.page-cookies .navbar .nav-container { transform: translateY(0); }

  /* Tres columnas estables: el idioma ya no compite con los enlaces. */
  .navbar .nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-links { justify-self: center; }
  .nav-language-compact { display: none; }
  .nav-language-full {
    display: block;
    justify-self: end;
  }

  /* Microinteracción desktop: respuesta visual sin mover el grid ni sus targets. */
  .navbar .logo-mark,
  .navbar .nav-links a,
  .navbar a.lang-btn svg {
    transform-origin: center;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .navbar .nav-links a {
    transition:
      color 180ms ease,
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .navbar a.lang-btn {
    transition: opacity 180ms ease;
  }
  .navbar .logo:active .logo-mark,
  .navbar .nav-links a:active {
    transform: scale(0.985);
  }
  .navbar a.lang-btn:active {
    transform: none;
  }
  .navbar a.lang-btn:active svg {
    transform: scale(0.985);
  }

  .navbar .logo:hover .logo-mark {
    transform: translateY(-2px) scale(1.15);
  }
  .navbar .nav-links a:hover {
    color: var(--accent-soft);
    transform: translateY(-2px) scale(1.15);
  }
  .navbar a.lang-btn:hover {
    opacity: 1;
  }
  .navbar a.lang-btn:hover svg {
    transform: translateY(-2px) scale(1.15);
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar::before {
      transform: none;
    }
    .navbar .nav-container {
      transform: none;
    }
    .navbar .logo-mark,
    .navbar .nav-links a,
    .navbar a.lang-btn,
    .navbar a.lang-btn svg {
      transition-duration: 140ms !important;
    }
  }

  /* Hero desktop: video de fondo, texto en blanco */
  .hero {
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 96px;
    background: var(--bg-darker);
  }
  .hero-video-bg { display: block; }
  .hero::before {
    background: linear-gradient(to bottom, rgba(8,19,31,0.45) 0%, rgba(8,19,31,0.25) 50%, rgba(8,19,31,0.6) 100%);
    z-index: 1;
  }
  .hero::after {
    height: 80px;
    background: linear-gradient(to top, var(--bg-darker), transparent);
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 1;
  }
  .hero-content { max-width: 640px; z-index: 2; }
  .hero-eyebrow { color: var(--accent); }
  .hero-content h1 { color: #fff; }
  .hero-content h1 em { color: rgba(255,255,255,0.8); }
  .hero-sub { max-width: 460px; color: rgba(255,255,255,0.78); }
  .hero-cta-secondary { color: rgba(255,255,255,0.7); }
  .hero-cta-secondary:hover { color: #fff; }
  .hero-mountains { display: none; }
  .hero-scroll { z-index: 2; }

  /* El scroll vertical permanece libre. Los accesos del nav centran el
     carrusel con precisión desde JS, sin competir con un snap de sección. */
  html {
    scroll-padding-top: var(--navbar-h-desktop);
  }

  /* Carruseles a pantalla completa (menos el nav fijo de 64px) */
  .featured-section,
  .map-teaser {
    min-height: calc(100vh - var(--navbar-h-desktop));
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  /* En monitores muy altos el contenido conserva un pliegue editorial sin
     generar cientos de píxeles de aire que no aportan jerarquía. */
  @media (min-height: 1100px) {
    .featured-section,
    .map-teaser {
      min-height: min(calc(100svh - var(--navbar-h-desktop)), 62rem);
    }
  }

  /* Carrusel home: navegación deliberada por flechas, sin arrastre */
  .featured-section {
    padding: 88px 32px 64px;
  }
  .featured-head,
  .exp-swiper {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
  }
  .featured-head {
    padding: 0;
    margin-bottom: 34px;
  }
  .exp-swiper {
    --swiper-wrapper-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 0 52px !important;
  }
  .featured-head { align-items: flex-end; }
  .featured-head-actions { gap: 0; }
  .exp-swiper-nav-group {
    display: flex;
    align-items: center;
    height: 44px;
  }
  .carousel-nav {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    transition: color 0.2s, opacity 0.2s, transform 0.12s;
  }
  .carousel-nav svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), stroke-width 0.2s;
  }
  .carousel-nav:hover { color: var(--accent-deep); }
  .carousel-nav:hover svg { stroke-width: 2.1; }
  .carousel-nav--prev:hover svg { transform: translateX(-2px); }
  .carousel-nav--next:hover svg { transform: translateX(2px); }
  .carousel-nav:active { transform: scale(0.97); }
  .carousel-nav:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }
  .carousel-nav.swiper-button-disabled {
    color: var(--ink-light);
    cursor: default;
    opacity: 0.28;
    pointer-events: none;
  }
  .exp-swiper .swiper-slide {
    width: clamp(350px, 26vw, 368px);
    max-width: 368px;
  }
  .exp-card-img { height: auto; aspect-ratio: 8 / 5; }
  .exp-card-img img {
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .exp-card-body { padding: 21px 20px 22px; }
  .exp-card-body h3 { font-size: 1.2rem; }
  .exp-card-body p {
    -webkit-line-clamp: 2;
    margin-bottom: 18px;
  }
  .exp-card-price-label {
    display: block;
    margin-bottom: 2px;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .exp-card-price strong {
    display: block;
    font-size: 1.28rem;
    line-height: 1.2;
  }
  .exp-card:hover .exp-card-img img { transform: scale(1.025); }
  @media (prefers-reduced-motion: reduce) {
    .carousel-nav svg,
    .exp-card-img img { transition: none; }
    .carousel-nav:hover svg,
    .exp-card:hover .exp-card-img img { transform: none; }
  }

  /* Spot carousel: cabecera y acciones comparten la retícula de escritorio. */
  .map-teaser { padding: 88px 32px 64px; }
  .map-teaser-shell {
    max-width: 1280px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'head actions'
      'carousel carousel';
    column-gap: 48px;
  }
  .map-teaser-head {
    padding: 0;
    margin-bottom: 34px;
  }
  .map-teaser-carousel-frame { padding-inline: 0; }
  .map-teaser-actions {
    padding: 0;
    margin: 0 0 34px;
    align-self: end;
    gap: 22px;
  }
  .map-teaser.is-carousel-ready .spot-swiper-nav-group {
    display: flex;
    align-items: center;
    height: 44px;
  }
  .spot-swiper {
    --swiper-wrapper-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  .spot-swiper .swiper-slide {
    width: clamp(350px, 26vw, 368px);
    max-width: 368px;
  }
  .spot-card-body { padding: 21px 20px 22px; }
  .spot-card:hover { border-color: rgba(227,185,106,0.5); }
  .spot-card:hover .spot-card-media img { transform: scale(1.025); }
  .map-teaser-cta {
    min-height: 44px;
    padding: 10px 24px;
  }
  @media (prefers-reduced-motion: reduce) {
    .spot-card-media img { transition: none; }
    .spot-card:hover .spot-card-media img { transform: none; }
  }


  /* Experience detail: sidebar layout */
  .exp-intro { padding: 72px 0 64px; }
  .exp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 80px;
    align-items: start;
    flex-direction: unset;
  }
  .exp-price-amount span {
    display: block;
    margin: 4px 0 0;
    font-size: var(--text-meta);
    line-height: 1.4;
  }
  .exp-final-cta { padding: 72px 0; }

  /* About: 3-col team */

  /* Familia ASG — desktop */
  .familia-section { padding: 96px 0; }
  .familia-founders {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 72px;
    padding-bottom: 64px;
    margin-bottom: 64px;
  }
  .familia-avatar--lg { width: 128px; height: 128px; }
  .familia-avatar--lg span { font-size: 1.35rem; }
  .familia-founders .familia-item p { max-width: 32ch; }
  .familia-others { gap: 48px 56px; }
  .familia-avatar { width: 96px; height: 96px; }
  .familia-avatar span { font-size: 1.05rem; }


  /* Container */
  .container { padding: 0 32px; }

  /* Section spacings */
  .section { padding: 88px 0; }
  .featured-section { padding: 88px 32px 64px; }
  .about-text-section { padding: 80px 0; }
  .values-section { padding: 0 0 88px; }

  /* Footer: más ritmo entre enlaces sin reducir los targets de 44px */
  .footer-nav { gap: 16px; }

  /* ---- SPOTS DESKTOP — sidebar docked + detail panel + dropdown filtros ---- */
  body.page-spots {
    --spots-sidebar-desktop-w: clamp(320px, 25vw, 360px);
    --spots-detail-desktop-w: clamp(420px, 30vw, 480px);
  }
  body.page-spots .page-lead { display: none; }
  body.page-spots .footer    { display: none; }
  body.page-spots .navbar { background: var(--bg-dark); }

  body.page-spots #main-content {
    height: calc(100svh - var(--navbar-h-desktop));
    margin-top: var(--navbar-h-desktop);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  body.page-spots .spots-section {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }

  body.page-spots .spots-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
  }

  body.page-spots .spots-map {
    position: relative;
    inset: unset;
    flex: 1;
  }
  body.page-spots .spots-map .leaflet-bottom { bottom: 16px; right: 16px; }

  /* Sidebar: gana espacio de forma fluida sin ahogar el mapa en desktop estrecho */
  body.page-spots .spots-drawer {
    width: var(--spots-sidebar-desktop-w);
    transition: width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  body.page-spots .spots-sidebar {
    order: 0;
    flex: 1;
    width: var(--spots-sidebar-desktop-w);
    background: var(--bg);
    border: none;
    overflow-y: auto;
    padding-top: 0;
    visibility: visible;
    pointer-events: auto;
  }
  body.page-spots .spots-sidebar * { visibility: visible !important; }
  body.page-spots .spots-drawer[data-state="peek"] .spots-sidebar { pointer-events: auto; overflow-y: auto; }
  body.page-spots .spots-drawer[data-state="peek"] .spots-sidebar * { visibility: visible !important; }
  body.page-spots .spots-drawer-handle { display: none; }
  body.page-spots .spots-drawer-count  { display: none; }
  body.page-spots .spots-geo-fab       { display: none; }

  /* Cabecera del panel lateral */
  body.page-spots .spots-sidebar-head {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 14px 18px 13px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  body.page-spots .spots-sidebar-title {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--ink);
  }
  body.page-spots .spots-sidebar-count {
    font-size: var(--text-micro);
    color: var(--ink-light);
    letter-spacing: 0.04em;
    font-weight: 500;
  }
  body.page-spots .spots-sidebar-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  /* ---- Panel de detalle (desliza desde la derecha sobre el mapa) ---- */
  body.page-spots .spots-detail-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--spots-detail-desktop-w);
    background: var(--bg);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 30;
    overflow: hidden;
  }
  body.page-spots .spots-detail-panel.is-open { transform: translateX(0); }

  body.page-spots .spots-detail-panel-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  body.page-spots .spots-detail-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-micro);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-light);
    background: transparent;
    border: 1px solid var(--border);
    padding: 5px 10px;
    min-height: 44px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  body.page-spots .spots-detail-close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  body.page-spots .spots-detail-content { flex: 1; overflow-y: auto; }
  body.page-spots .spots-detail-content .spot-media-gallery { height: clamp(240px, 19vw, 280px); }
  body.page-spots .spots-detail-content .spot-popup-body { padding: 24px 28px 38px; }
  body.page-spots .spots-detail-content .spot-popup p { font-size: 0.9375rem; line-height: 1.72; }
  body.page-spots .spots-detail-content .spot-popup-meta { gap: 6px; }

  /* ---- Toggle del panel lateral (borde derecho del sidebar) ---- */
  body.page-spots .spots-panel-toggle {
    left: var(--spots-sidebar-desktop-w);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--bg);
    border-color: var(--border);
    z-index: 25;
    transition: left 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.18s, transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  body.page-spots .spots-panel-toggle:hover { background: var(--bg-dark); color: #fff; border-color: var(--bg-dark); }

  body.page-spots .sidebar-collapsed .spots-drawer { width: 0; border-right: none; transform: none; }
  body.page-spots .sidebar-collapsed .spots-panel-toggle { left: 8px; transform: translate(0, -50%); }
  body.page-spots .sidebar-collapsed .spots-panel-toggle svg { transform: rotate(180deg); }

  @media (max-width: 1279px) {
    body.page-spots .sidebar-auto-collapsed .spots-panel-toggle {
      opacity: 0;
      pointer-events: none;
    }
  }

  /* Spot items */
  body.page-spots .spot-item-button {
    padding: 12px 16px;
    min-height: 52px;
    gap: 10px;
  }
  body.page-spots .spot-item:hover,
  body.page-spots .spot-item.active { background: rgba(227,185,106,0.07); }
  body.page-spots .spot-item strong { font-size: var(--text-small); color: var(--ink); margin-bottom: 2px; }
  body.page-spots .spot-item span { font-size: var(--text-meta); color: var(--ink-light); }
  body.page-spots .spot-item-dot {
    width: 10px;
    height: 10px;
    box-shadow: inset 0 0 0 1px rgba(8, 19, 31, 0.12);
  }
  body.page-spots .spot-item[data-spot-role="surf"] .spot-item-dot { background: var(--sky-pastel) !important; }
  body.page-spots .spot-item[data-spot-role="beach"] .spot-item-dot { background: var(--accent) !important; }
  body.page-spots .spot-item[data-spot-role="mountain"] .spot-item-dot { background: var(--accent-deep) !important; }
  body.page-spots .spots-status { background: var(--white); border-color: var(--border); color: var(--ink-light); }

  /* ---- Nosotros: texto editorial con respiro deliberado, no accidental ---- */
  body.page-nosotros .about-text-section {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  body.page-nosotros .about-text-section::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -60px;
    transform: translateY(-50%);
    width: 480px;
    height: 480px;
    background: url('../assets/lineart/auto/tenerife-island.svg') center / contain no-repeat;
    opacity: 0.14;
    pointer-events: none;
  }

  /* ---- Experiencia: ancho de lectura cómodo para el cuerpo de texto ---- */
  .exp-description { max-width: 65ch; }

  /* ---- Galería de experiencia: mosaico en escritorio ----
     Las fotos reales de cada experiencia mezclan retrato, panorámica y
     cuadrada sin patrón (paddle-sup, kayak-costa-sur, taller-sushi-nikkei
     tienen las tres en la misma galería). El grid de 2-3 columnas con
     aspect-ratio fija (móvil/tablet) fuerza esa mezcla a una única forma
     y recorta mal las que no encajan — el propio flag "wide" del
     contenido a veces cae en una foto que en realidad es vertical.
     En escritorio, con más aire para respirar, un mosaico de columnas
     dejando que cada imagen conserve su proporción real evita ese
     recorte: el único redimensionado es la escala al ancho de columna,
     nunca un recorte a una forma que no es la suya. */
  .exp-gallery {
    display: block;
    column-count: 3;
    column-gap: 3px;
  }
  .exp-gallery-item {
    aspect-ratio: auto;
    break-inside: avoid;
    margin-bottom: 3px;
  }
  .exp-gallery-item.wide {
    grid-column: auto;
    aspect-ratio: auto;
  }
  .exp-gallery-item.media-missing {
    aspect-ratio: 1;
  }
  .exp-gallery-item img {
    height: auto;
    object-fit: initial;
  }

  /* ---- WA Builder: dos columnas, rail de pasos numerado a la izquierda,
     paso activo a la derecha. El rail sustituye a los antiguos guiones
     verticales sueltos (leían como un adorno de borde flotante, sin
     relación visual con el contenido) por una lista real de pasos con
     nombre — más orientador y más acorde a "borde sobre sombra". ---- */
  .wa-builder {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 56px;
    align-items: start;
  }
  .wa-progress {
    grid-column: 1;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    position: sticky;
    top: 120px;
  }
  .wa-dot {
    width: auto;
    height: auto;
    background: none;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    opacity: 0.68;
    transition: opacity 0.25s;
  }
  .wa-dot:first-child { padding-top: 0; }
  .wa-dot:last-child { border-bottom: none; }
  .wa-dot.done,
  .wa-dot.active { opacity: 1; background: none; }
  .wa-dot-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--ink-light);
    min-width: 20px;
  }
  .wa-dot.active .wa-dot-num { color: var(--accent-deep); }
  .wa-dot-label {
    display: block;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-light);
  }
  .wa-dot.active .wa-dot-label { color: var(--ink); }

  .wa-step {
    grid-column: 2;
    max-width: 480px;
  }

  /* Cursiva reservada a una palabra por titular (regla de marca): en el
     ancho generoso de escritorio, el titular y el valor del stepper en
     cursiva completa se sentían menos cuidados que el resto del sitio. */
  .wa-step > h3 { font-style: normal; }
  .wa-stepper-val { font-style: normal; }

  /* El stepper heredaba proporciones pensadas para 360px de móvil; a los
     480px del step en escritorio el valor central quedaba flotando en un
     hueco vacío entre los botones. Un ancho propio, más recogido, lo
     agrupa como un único control en vez de tres piezas dispersas. */
  .wa-stepper { max-width: 340px; }

  /* ---- Navegación entre experiencias (desktop): persistente desde el
     primer scroll. El desplazamiento vertical lo controla JS para mantener
     siempre una separación limpia respecto al footer. ---- */
  .exp-neighbor-nav { display: block; }
  .exp-sequence-nav { display: none; }
  .exp-neighbor {
    --neighbor-enter-x: 0px;
    --neighbor-scale: 1;
    --neighbor-footer-lift: 0px;
    position: fixed;
    bottom: 28px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 168px;
    min-height: 64px;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px 8px 8px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 var(--neighbor-footer-lift);
    transform: translateX(var(--neighbor-enter-x)) scale(var(--neighbor-scale));
    transition: opacity 0.24s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.26s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.16s ease;
  }
  .exp-neighbor--prev {
    --neighbor-enter-x: -16px;
    left: 20px;
  }
  .exp-neighbor--next {
    --neighbor-enter-x: 16px;
    right: 20px;
    left: auto;
    flex-direction: row-reverse;
    padding: 8px 8px 8px 12px;
  }
  .exp-neighbor-nav.is-visible .exp-neighbor {
    --neighbor-enter-x: 0px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .exp-neighbor:active { --neighbor-scale: 0.98; }
  .exp-neighbor-thumb {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--sand-pastel) center / cover no-repeat;
    transition: transform 0.24s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .exp-neighbor-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .exp-neighbor--next .exp-neighbor-text { text-align: right; }
  .exp-neighbor-dir {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-light);
  }
  .exp-neighbor--next .exp-neighbor-dir { flex-direction: row-reverse; }
  .exp-neighbor-dir svg { width: 13px; height: 13px; flex-shrink: 0; }
  .exp-neighbor-title {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    line-height: 1.22;
    color: var(--ink);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  @media (hover: hover) and (pointer: fine) {
    .exp-neighbor:hover {
      border-color: rgba(122,82,32,0.42);
    }
    .exp-neighbor:hover .exp-neighbor-thumb { transform: scale(1.035); }
  }
  @media (prefers-reduced-motion: reduce) {
    .exp-neighbor {
      --neighbor-enter-x: 0px;
      transition: opacity 0.16s ease;
    }
    .exp-neighbor-thumb { transition: none; }
  }

  /* En el portátil estrecho la navegación se convierte en una pestaña
     tipográfica: mantiene dirección y un target cómodo sin tapar contenido. */
  @media (max-width: 1399px) {
    .exp-neighbor {
      width: 72px;
      min-height: 68px;
      padding: 7px 5px;
      gap: 0;
    }
    .exp-neighbor-thumb,
    .exp-neighbor-title { display: none; }
    .exp-neighbor-text { width: 100%; }
    .exp-neighbor-dir {
      flex-direction: column;
      justify-content: center;
      gap: 3px;
      font-size: 0.6875rem;
      text-align: center;
    }
    .exp-neighbor--next .exp-neighbor-dir { flex-direction: column-reverse; }
  }

  /* En pantallas holgadas se recupera la ficha completa. */
  @media (min-width: 1600px) {
    .exp-neighbor {
      bottom: 32px;
      gap: 11px;
      width: 216px;
      min-height: 72px;
      padding: 9px 14px 9px 9px;
    }
    .exp-neighbor--prev { left: 32px; }
    .exp-neighbor--next {
      right: 32px;
      padding: 9px 9px 9px 14px;
    }
    .exp-neighbor-thumb { width: 52px; height: 52px; }
    .exp-neighbor-title { font-size: 0.9rem; }
  }
}

/* PORTÁTIL BAJO: conserva el vídeo y el eje centrado, pero elimina el exceso
   vertical que antes obligaba al hero a superar el viewport. Se declara tras
   el bloque desktop para prevalecer sobre su padding cinematográfico. */
@media (min-width: 1100px) and (max-height: 650px) {
  .hero {
    min-height: 100svh;
    padding-top: var(--navbar-h-desktop);
    padding-bottom: 28px;
  }
  .hero-logo { height: 64px; margin-bottom: 12px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero-content h1 { margin-bottom: 10px; font-size: clamp(2.6rem, 4vw, 3.2rem); }
  .hero-sub { margin-bottom: 16px; line-height: 1.6; }
  .hero-actions {
    max-width: none;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
  .hero-cta-primary { width: auto; white-space: nowrap; }
  .hero-scroll { display: none; }
}