/* ============================================================
   PROPUESTA — capa de diseño (ALMA) · v9
   (fusionada en el sistema real: esto YA no es una maqueta)
   La HOME es un duplicado exacto del original: los textos, el
   hero, el slider y la franja verde NO se tocan. Esta capa solo
   aplica lo aprobado:
   1) Móvil: header con franja crema, tabbar de una fila con la
      pestaña activa destacada (mismo tamaño siempre).
   2) Mundos: conmutador compacto en el header (móvil) y chat de
      Laura como pieza flotante "Laura · Asistente de eventos"
      SOLO en eventos (en restaurante no hay chat).
   ============================================================ */

/* ── NAVEGACIÓN SUAVE ────────────────────────────────────────
   Fundido suave entre páginas al hacer clic (View Transitions:
   el navegador cruza las dos pantallas en vez de dar el "salto"). */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.22s}
::view-transition-new(root){animation-duration:.3s}
/* y el "apretón" de los botones, con muelle suave */
.worldswitch--nav .ws,.worldswitch-mob .ws,.tabbar .tab,.pd-reserva,.lw-btn{
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,color .3s,
    box-shadow .3s,border-color .3s}
.worldswitch--nav .ws:active,.worldswitch-mob .ws:active,
.tabbar .tab:active{transform:scale(.94)}
.pd-reserva:active,.lw-btn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── VISITAS EN MÓVIL: aire y sin estorbos ───────────────────
   En el asistente de visitas el usuario YA está convirtiendo:
   la pastilla de Laura fuera (tapaba el calendario) y el card
   con más respiración en textos y márgenes. */
@media (max-width:1080px){
  body.pd-visitas .lw-btn--float,
  body.pd-visitas .lw-hint,
  body.pd-visitas .lw-panel{display:none!important}
  body.pd-visitas .vis-card{padding:28px 20px 32px}
  body.pd-visitas .vis-q{font-size:clamp(23px,6vw,28px);line-height:1.3;margin-bottom:10px}
  body.pd-visitas .vis-sub{margin-bottom:26px;line-height:1.6}
  body.pd-visitas .vis-sec{padding-top:30px}
  body.pd-visitas .hero-content{padding-bottom:clamp(44px,7vh,72px);
    padding-left:28px;padding-right:28px}
}

/* ── FRANJA CLARA ANTES DEL FOOTER ───────────────────────────
   Separa el cierre oscuro del footer oscuro con el slider de
   palabras sobre crema. */
.pd-franja-pie{background:#f6f2e9}

/* ── KICKER DEL HERO SIEMPRE LEGIBLE ─────────────────────────
   Estilo editorial (nada de pastillas que parezcan botones):
   dorado latón con rayita delante y sombra fina — se lee sobre
   cualquier foto y no se confunde con nada clicable. */
.hero .label{opacity:1}
.hero .label.line > span{display:inline-flex;align-items:center;gap:12px;
  color:#d8b573;font-weight:600;
  text-shadow:0 1px 3px rgba(20,25,20,.65),0 2px 16px rgba(20,25,20,.5)}
.hero .label.line > span::before{content:"";display:inline-block;flex:none;
  width:26px;height:1.5px;background:#d8b573;
  box-shadow:0 1px 3px rgba(20,25,20,.5)}

/* ── EXPERIENCIA "VIVE TU EVENTO" ────────────────────────────
   El botón palpitante flotante desaparece en TODAS las pantallas:
   el único acceso es el botón con halo bajo el texto de
   "Celebrar en Can Casellas". Sin auto-asaltos. */
.xp-btn{display:none!important}
/* botón inline bajo el texto: GRANDE, DORADO (el único botón de este
   color en toda la web) y con halo — imposible no querer tocarlo */
.pd-xp-cta{position:relative;display:inline-flex;align-items:center;gap:11px;
  margin-top:30px;border:none;cursor:pointer;
  background:linear-gradient(150deg,#c9a45e,#b08d4a);color:#26221b;
  border-radius:999px;padding:20px 38px;white-space:nowrap;
  font-family:"Hanken Grotesk",sans-serif;font-size:13.5px;letter-spacing:.17em;
  text-transform:uppercase;font-weight:600;line-height:1;
  box-shadow:0 16px 40px rgba(176,141,74,.45);
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.pd-xp-cta i{font-style:normal;font-size:16px;line-height:1}
.pd-xp-cta::after{content:"";position:absolute;inset:-7px;border-radius:999px;
  border:2px solid rgba(176,141,74,.55);animation:pdHalo 2.4s infinite}
@media (prefers-reduced-motion:reduce){.pd-xp-cta::after{animation:none;opacity:0}}
.pd-xp-cta:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(176,141,74,.55)}
.pd-xp-cta:active{transform:scale(.97)}
/* móvil: centrado en su sección */
@media (max-width:1080px){
  .pd-xp-cta{display:flex;width:max-content;margin:30px auto 0}
}

/* ── VÍDEO DE LOS ESPACIOS (eventos) ─────────────────────────
   Escritorio: vídeo retrato a la IZQUIERDA + carrusel clicable a la
   DERECHA, lado a lado. Móvil: apilados (vídeo primero). */
.esp-video{margin:0 auto 48px;max-width:400px}
.esp-video video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:22px;box-shadow:0 24px 60px rgba(23,30,25,.35);background:#171b16}
.esp-video figcaption{margin-top:12px;text-align:center;
  font-family:"Hanken Grotesk",sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(251,249,243,.65)}
@media (max-width:1080px){.esp-video{max-width:min(340px,82vw)}}
/* secciones blancas con vídeo: eventos = vídeo izq + texto dcha;
   restaurante = texto izq + vídeo dcha (contrapesa la foto siguiente) */
.pd-celebra .esp-video figcaption,.pd-come .esp-video figcaption{color:#8b857a}
@media (min-width:1081px){
  .pd-celebra{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);
    gap:56px;align-items:center}
  .pd-come{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);
    gap:56px;align-items:center}
  .pd-celebra .esp-video,.pd-come .esp-video{margin:0;max-width:none}
}
@media (max-width:1080px){
  .pd-celebra .esp-video{margin-bottom:36px}
  .pd-come .esp-video{margin-top:36px}
}

/* ── CHAT POR MUNDOS ─────────────────────────────────────────
   Laura vive en eventos (y en la home, donde queda el original).
   En el mundo restaurante no hay chat. */
body[data-zona="restaurante"]:not(.pd-home) .nav-links li.nav-chat,
body[data-zona="restaurante"]:not(.pd-home) .lw-btn--float,
body[data-zona="restaurante"]:not(.pd-home) .lw-hint,
body[data-zona="restaurante"]:not(.pd-home) .lw-panel{display:none!important}

/* ── LAURA EN EVENTOS: pastilla flotante integrada ─────────── */
body[data-zona="eventos"] .lw-btn--float{
  width:auto;height:auto;border-radius:999px;right:16px;
  bottom:calc(env(safe-area-inset-bottom) + 88px);
  padding:11px 18px 11px 14px;gap:9px;
  display:flex;align-items:center;justify-content:flex-start;
  background:linear-gradient(150deg,#8a6248,#6b4e3a);
  box-shadow:0 12px 32px rgba(107,78,58,.5)}
body[data-zona="eventos"] .lw-btn--float svg{width:21px;height:21px;stroke:#fff}
body[data-zona="eventos"] .lw-btn--float::after{content:"";position:absolute;
  inset:-6px;border-radius:999px;border:2px solid rgba(107,78,58,.4);
  animation:pdHalo 2.6s infinite}
@keyframes pdHalo{0%{transform:scale(.94);opacity:.9}70%{transform:scale(1.08);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  body[data-zona="eventos"] .lw-btn--float::after{animation:none;opacity:0}
}
body[data-zona="eventos"] .lw-btn--float .lw-btn-txt{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  color:#fbf9f3;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;line-height:1.1}
body[data-zona="eventos"] .lw-btn--float .lw-btn-txt::after{
  content:"Asistente de eventos";font-size:8px;letter-spacing:.09em;
  font-weight:500;opacity:.85}
body[data-zona="eventos"] .lw-btn--float .lw-dot{top:-2px;right:-2px}
/* la pista y el panel salen desde abajo, junto a la pastilla */
body[data-zona="eventos"] .lw-hint{
  top:auto;right:16px;bottom:calc(env(safe-area-inset-bottom) + 156px);
  border-radius:14px 14px 3px 14px}
body[data-zona="eventos"] .lw-panel{
  top:auto;bottom:calc(env(safe-area-inset-bottom) + 152px);
  height:min(520px,calc(100dvh - 220px))}
/* escritorio (sin tabbar): la pastilla baja a la esquina */
@media (min-width:1081px){
  body[data-zona="eventos"] .lw-btn--float{bottom:24px;right:24px}
  body[data-zona="eventos"] .lw-hint{bottom:96px;right:24px}
  body[data-zona="eventos"] .lw-panel{bottom:92px}
}

/* ── MÓVIL (≤1080px): capa aprobada ─────────────────────────── */
@media (max-width:1080px){

  /* header con franja crema: logo en tinta, fondo sólido, línea fina.
     Sin desenfoque: un header con backdrop-filter "captura" a los
     elementos fijos que tenga dentro (bug conocido). */
  .nav{background:#f6f2e9;border-bottom:1px solid rgba(38,34,27,.08);
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .nav .logo{color:var(--tinta,#26221b)}

  /* tabbar de UNA fila: fuera la fila de píldoras del conmutador */
  .tabbar .worldswitch{display:none}

  /* pestaña ACTIVA destacada con píldora de color de zona.
     Todas las pestañas comparten tamaño: solo cambia fondo y color. */
  .tabbar .tab:not(.tab--center){padding:6px 8px 5px;border-radius:13px;margin:0 2px}
  .tabbar .tab.on{background:rgba(36,56,44,.12);color:var(--bosc,#24382c);font-weight:500}
  body[data-zona="eventos"] .tabbar .tab.on{background:rgba(107,78,58,.14);color:#6b4e3a}

  /* conmutador de mundos compacto en el header (solo mundos, no home) */
  .worldswitch-mob{display:flex;gap:4px;padding:3px;border-radius:999px;
    background:rgba(38,34,27,.05);border:1px solid rgba(176,141,74,.35)}
  .worldswitch-mob .ws{display:flex;align-items:center;gap:5px;border-radius:999px;
    padding:7px 11px;font-family:"Hanken Grotesk",sans-serif;font-size:9.5px;
    letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:#26221b;text-decoration:none;line-height:1;transition:.3s}
  .worldswitch-mob .ws svg{width:13px;height:13px;stroke:currentColor;fill:none;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .worldswitch-mob .ws--rest.on{background:#24382c;color:#fbf9f3}
  .worldswitch-mob .ws--evt.on{background:#6b4e3a;color:#fbf9f3}
  .worldswitch-mob .ws:not(.on) span{display:none}
}

/* en escritorio el conmutador compacto no existe (ya está el del header) */
@media (min-width:1081px){
  .worldswitch-mob{display:none}
}

/* ── MUNDOS · ESCRITORIO (≥1081px): franja crema como en la home ──
   logo | selector (marca el mundo activo) | secciones del mundo.
   Restaurante: Carta · Historia · Galería + "Reservar mesa" fijo.
   Eventos: Bodas · Empresas · Galería · Historia + Laura fija. */
/* estilos comunes del botón fijo Reservar mesa (los tamaños por
   pantalla van en cada media query) */
.pd-reserva{display:inline-flex;align-items:center;gap:10px;position:fixed;
  z-index:214;text-decoration:none;background:var(--bosc,#24382c);color:#fbf9f3;
  border-radius:999px;font-family:"Hanken Grotesk",sans-serif;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;line-height:1;
  box-shadow:0 14px 36px rgba(36,56,44,.45);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .3s,opacity .4s}
.pd-reserva svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pd-reserva::after{content:"";position:absolute;inset:-6px;border-radius:999px;
  border:2px solid rgba(36,56,44,.4);animation:pdHalo 2.6s infinite}
@media (prefers-reduced-motion:reduce){.pd-reserva::after{animation:none;opacity:0}}
/* móvil: sobre la tabbar, invisible hasta pasar el hero */
@media (max-width:1080px){
  .pd-reserva{right:16px;bottom:calc(env(safe-area-inset-bottom) + 88px);
    padding:13px 22px 13px 17px;font-size:11px;
    opacity:0;pointer-events:none;transform:translateY(10px)}
  .pd-reserva.pd-reserva--on{opacity:1;pointer-events:auto;transform:none}
}
@media (min-width:1081px){
  body:not(.pd-home) .nav{background:#f6f2e9;
    border-bottom:1px solid rgba(38,34,27,.08);
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body:not(.pd-home) .nav .logo{color:var(--tinta,#26221b)}
  body:not(.pd-home) .nav-links a:not(.btn){color:#5f584c}
  body:not(.pd-home) .nav-links a.active{color:#26221b}
  /* orden del header de mundo: logo | secciones CENTRADAS | selector
     a la derecha — así el selector queda en el MISMO sitio que en la
     home y no salta al navegar */
  body:not(.pd-home) .nav-inner > nav{order:2;flex:1;display:flex;justify-content:center}
  body:not(.pd-home) .nav-inner .worldswitch--nav{order:3;margin:0 0 0 18px}
  body:not(.pd-home) .worldswitch--nav{background:rgba(38,34,27,.06);
    border:1px solid rgba(38,34,27,.08);padding:4px}
  body:not(.pd-home) .worldswitch--nav .ws{padding:12px 22px;font-size:11.5px}
  body:not(.pd-home) .worldswitch--nav .ws:not(.on){color:#26221b}
  /* heros de los mundos grandes pero SIN comerse la pantalla entera:
     abajo asoma el blanco de la siguiente sección, y sobre ese blanco
     destacan de verdad los botones con halo (Reservar mesa / Laura) */
  body:not(.pd-home) .hero--sub{min-height:86vh;min-height:86svh}
  /* Reservar mesa fijo abajo-derecha (solo mundo restaurante),
     con el mismo cuerpo que la pastilla de Laura — siempre visible */
  .pd-reserva{right:24px;bottom:24px;padding:16px 30px 16px 24px;font-size:13px;gap:12px}
  .pd-reserva svg{width:22px;height:22px}
  .pd-reserva:hover{transform:translateY(-2px);background:#2e4737}
  /* y la pastilla de Laura en eventos, al mismo tamaño */
  body[data-zona="eventos"] .lw-btn--float{padding:14px 24px 14px 18px;gap:12px}
  body[data-zona="eventos"] .lw-btn--float svg{width:24px;height:24px}
  body[data-zona="eventos"] .lw-btn--float .lw-btn-txt{font-size:13px;gap:3px}
  body[data-zona="eventos"] .lw-btn--float .lw-btn-txt::after{font-size:9.5px}
}

/* ── HOME · capa móvil aprobada (el escritorio queda ORIGINAL) ── */
.pd-scroll{display:none}
@media (max-width:1080px){
  /* hero: solo Descubre (sólido) — Reservar mesa y el "en vivo" se van */
  body.pd-home .hero-foot a.btn--llum,
  body.pd-home .hero-live{display:none}
  body.pd-home .hero-foot [data-descubre]{background:var(--llum,#fbf9f3);
    color:var(--bosc,#24382c);border-color:transparent}
  /* pista "desliza": con aire respecto al botón Descubre */
  body.pd-home .pd-scroll{display:flex;position:absolute;left:0;right:0;
    bottom:calc(env(safe-area-inset-bottom) + 78px);z-index:2;
    align-items:center;justify-content:center;gap:8px;
    font-family:"Hanken Grotesk",sans-serif;font-size:9.5px;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(251,249,243,.65)}
  body.pd-home .pd-scroll span{animation:pdBaja 1.8s infinite;display:inline-block}
  /* barra de DOS MUNDOS: cápsula de cristal oscuro sobre la foto,
     el mismo lenguaje que los botones fantasma del hero */
  body.pd-home .tabbar{left:50%;right:auto;transform:translateX(-50%);
    width:max-content;max-width:calc(100vw - 24px);border-radius:999px;
    padding:6px;background:rgba(23,30,25,.38);
    border:1px solid rgba(251,249,243,.32);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 12px 34px rgba(23,30,25,.35)}
  body.pd-home .tabbar-in{gap:4px;align-items:center}
  body.pd-home .tabbar .tab{flex-direction:row;gap:9px;text-decoration:none;
    padding:12px 18px;border-radius:999px;font-size:10.5px;letter-spacing:.15em;
    font-weight:500;color:#fbf9f3;white-space:nowrap;margin:0}
  body.pd-home .tabbar .tab svg{width:15px;height:15px}
  body.pd-home .tabbar .tab:active{background:rgba(251,249,243,.14)}
  /* deja aire para que la pista no pise la tabbar ni el botón */
  body.pd-home .hero-content{padding-bottom:clamp(126px,17vh,170px)}
  /* secciones que la portada móvil no enseña */
  body.pd-home .pd-hide-mob{display:none}
  /* Laura en la home: pastilla integrada DENTRO de la franja crema,
     a la derecha del logo (en el flujo normal del header) */
  body.pd-home .nav-links li.nav-chat .lw-btn{position:relative;
    width:auto;height:auto;border-radius:999px;padding:8px 14px 8px 11px;gap:8px;
    display:flex;align-items:center;border:none;
    background:linear-gradient(150deg,#8a6248,#6b4e3a);
    box-shadow:0 6px 16px rgba(107,78,58,.35)}
  body.pd-home .nav-links li.nav-chat .lw-btn svg{width:18px;height:18px;stroke:#fff}
  body.pd-home .nav-links li.nav-chat .lw-btn .lw-btn-txt{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    color:#fbf9f3;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:600;line-height:1.1}
  body.pd-home .nav-links li.nav-chat .lw-btn .lw-btn-txt::after{
    content:"Asistente de eventos";font-size:7.5px;letter-spacing:.08em;
    font-weight:500;opacity:.85}
  body.pd-home .nav-links li.nav-chat .lw-btn .lw-dot{top:-3px;right:-2px}
  body.pd-home .lw-hint{top:calc(env(safe-area-inset-top) + 68px);right:14px;bottom:auto;
    border-radius:3px 14px 14px 14px}
  body.pd-home .lw-panel{top:calc(env(safe-area-inset-top) + 68px);bottom:auto;
    height:min(540px,calc(100dvh - 190px))}
}
@keyframes pdBaja{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){
  body.pd-home .nav-links li.nav-chat .lw-btn::after{animation:none;opacity:0}
  body.pd-home .pd-scroll span{animation:none}
}

/* ── HOME · ESCRITORIO (≥1081px): header reubicado ──────────────
   Franja crema; fuera la nav (Restaurante/Carta/Eventos/Bodas/
   Historia/Galería) y el botón Reservar mesa — eso vive dentro de
   cada mundo. Quedan: logo | selector de mundos al centro | Laura.
   El resto de la pantalla NO se toca. */
@media (min-width:1081px){
  body.pd-home .nav{background:#f6f2e9;border-bottom:1px solid rgba(38,34,27,.08);
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.pd-home .nav .logo{color:var(--tinta,#26221b)}
  body.pd-home .nav-links li:not(.nav-chat){display:none!important}
  /* el selector de mundos A LA DERECHA del header (donde estaba Laura),
     más grande y claro, en su variante tinta sobre crema */
  body.pd-home .worldswitch--nav{margin:0 0 0 auto;padding:4px;
    background:rgba(38,34,27,.06);border:1px solid rgba(38,34,27,.08)}
  body.pd-home .worldswitch--nav .ws{padding:12px 22px;font-size:11.5px}
  body.pd-home .worldswitch--nav .ws:not(.on){color:#26221b}
  /* Laura: pastilla flotante abajo a la derecha, ENCIMA de las rayitas
     del slider (que viven en bottom:40px) */
  body.pd-home .nav-links li.nav-chat .lw-btn{position:fixed;
    right:clamp(20px,5vw,64px);bottom:74px;z-index:214;
    width:auto;height:auto;border-radius:999px;padding:14px 24px 14px 18px;gap:12px;
    display:flex;align-items:center;border:none;
    background:linear-gradient(150deg,#8a6248,#6b4e3a);
    box-shadow:0 14px 36px rgba(107,78,58,.5)}
  body.pd-home .nav-links li.nav-chat .lw-btn svg{width:24px;height:24px;stroke:#fff}
  body.pd-home .nav-links li.nav-chat .lw-btn .lw-btn-txt{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    color:#fbf9f3;font-size:13px;letter-spacing:.14em;
    text-transform:uppercase;font-weight:600;line-height:1.1}
  body.pd-home .nav-links li.nav-chat .lw-btn .lw-btn-txt::after{
    content:"Asistente de eventos";font-size:9.5px;letter-spacing:.08em;
    font-weight:500;opacity:.85}
  body.pd-home .nav-links li.nav-chat .lw-btn .lw-dot{top:-3px;right:-2px;
    width:12px;height:12px}
  /* el chat sube desde abajo, junto a la pastilla */
  body.pd-home .lw-hint{top:auto;right:clamp(20px,5vw,64px);bottom:152px;
    border-radius:14px 14px 3px 14px}
  body.pd-home .lw-panel{top:auto;right:clamp(20px,5vw,64px);bottom:148px;
    height:min(560px,calc(100dvh - 200px))}
}

/* ── i18n DE LA PASTILLA DE LAURA ────────────────────────────
   El subtítulo "Asistente de eventos" se pinta con content: en CSS,
   y el motor de i18n solo toca el DOM (nodos y atributos): sin esto
   se quedaba en español al pasar a CA/EN. i18n.js escribe el idioma
   en <html lang>, así que lo resolvemos por CSS.
   Van sin @media a propósito: el prefijo html[lang=".."] añade
   especificidad y por eso gana también dentro de las media queries
   de arriba, sin tener que duplicar cada bloque. */
html[lang="ca"] body[data-zona="eventos"] .lw-btn--float .lw-btn-txt::after,
html[lang="ca"] body.pd-home .nav-links li.nav-chat .lw-btn .lw-btn-txt::after{
  content:"Assistent d'esdeveniments"}
html[lang="en"] body[data-zona="eventos"] .lw-btn--float .lw-btn-txt::after,
html[lang="en"] body.pd-home .nav-links li.nav-chat .lw-btn .lw-btn-txt::after{
  content:"Events assistant"}