/* ============================== BASES ============================== */
  :root{
    --line: rgba(44,37,34,.14);   /* hairline sobre papel */
    --line-strong: rgba(44,37,34,.28);
    --line-light: rgba(245,240,230,.18); /* hairline sobre fondo oscuro */
    --ease-out: cubic-bezier(.16,.84,.3,1);
    --ease-soft: cubic-bezier(.22,1,.36,1);
    --shadow-soft: 0 22px 60px rgba(44,37,34,.12);
  }
  html{ scroll-behavior:smooth; }
  body{
    background:#F5F0E6;
    color:#2C2522;
    font-family:Inter, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body.modal-open,
  body.menu-open,
  body.lightbox-open{ overflow:hidden; }
  ::selection{ background:#C17A5C; color:#F5F0E6; }
  img{ max-width:100%; }

  /* Tracking utilitario para etiquetas tipo "field data" */
  .eyebrow{ font-family:"Space Mono",monospace; letter-spacing:.22em; text-transform:uppercase; font-size:.66rem; }

  /* Líneas finas reutilizables */
  .hair{ border-color:var(--line); }
  .hair-b{ border-bottom:1px solid var(--line); }
  .hair-t{ border-top:1px solid var(--line); }

  /* Barra de progreso de lectura (discreta) */
  #scrollProgress{
    position:fixed; top:0; left:0; height:2px; width:0%;
    background:linear-gradient(90deg,#B0795F,#8F6244);
    z-index:65; pointer-events:none; transition:width .1s linear; opacity:.9;
  }

  /* ============================== FILM GRAIN ============================== */
  /* Ruido sutil de papel/cine, fijo sobre todo el documento. */
  .grain{
    position:fixed; inset:0; z-index:60; pointer-events:none;
    opacity:.035; mix-blend-mode:multiply;
    contain:paint;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ============================== REVELADOS AL SCROLL ============================== */
  .reveal{
    opacity:0;
    transform:translate3d(0,22px,0);
    transition:opacity .72s var(--ease-soft), transform .72s var(--ease-soft);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity, transform;
  }
  .reveal.in{ opacity:1; transform:none; }

  /* Revelado con máscara suave para imágenes editoriales */
  .reveal-img > img,
  .reveal-img > video{
    clip-path:inset(0 0 12% 0);
    transform:scale(1.06);
    opacity:.001;
    transition:clip-path 1.05s var(--ease-soft), transform 1.35s var(--ease-soft), opacity .9s ease;
    will-change:clip-path, transform;
  }
  .reveal-img.in > img,
  .reveal-img.in > video{ clip-path:inset(0 0 0 0); transform:scale(1); opacity:1; }

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

  /* ============================== LOGO ============================== */
  #nav img,
  #mobileMenu img,
  footer img{
    display:block;
    height:auto;
    object-fit:contain;
    flex-shrink:0;
  }
  #nav img{ max-height:64px; width:auto; }
  #mobileMenu img{ max-height:52px; width:auto; }
  footer img{ max-width:190px; }
  /* El logo es multicolor; sobre el hero oscuro añadimos una sombra sutil para legibilidad */
  #nav:not(.is-solid) img{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

  /* ============================== INDICADOR DE SCROLL ============================== */
  .scroll-cue{ align-items:flex-end; height:52px; width:20px; }
  .scroll-cue-line{ position:relative; display:block; width:1px; height:44px; background:rgba(245,240,230,.45); overflow:hidden; }
  .scroll-cue-line::after{
    content:""; position:absolute; top:-40%; left:0; width:100%; height:40%;
    background:#F5F0E6; animation:cueSlide 2.4s var(--ease-soft) infinite;
  }
  @keyframes cueSlide{ 0%{ transform:translateY(-20%); opacity:0 } 40%{ opacity:1 } 100%{ transform:translateY(280%); opacity:0 } }

  /* ============================== TARJETAS ============================== */
  .card{
    transition:opacity .32s ease, transform .34s var(--ease-out), border-color .28s ease, box-shadow .34s var(--ease-out);
    will-change:opacity, transform;
  }
  .card.is-filtered-out{
    opacity:0;
    transform:translate3d(0,10px,0) scale(.985);
    pointer-events:none;
  }
  .card-img{
    transform:translateZ(0);
    transition:transform .85s var(--ease-out);
    backface-visibility:hidden;
  }
  .card .veil{ transition:opacity .34s ease; }
  .card .detail-cue{ transition:transform .34s var(--ease-out), opacity .34s ease; }
  .card:focus-visible{ outline:2px solid #B0795F; outline-offset:4px; }
  @media (hover:hover) and (pointer:fine){
    .card:hover{ transform:translate3d(0,-4px,0); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
    .card:hover .card-img{ transform:scale(1.045); }
    .card:hover .veil{ opacity:1; }
    .card:hover .detail-cue{ transform:translateY(0); opacity:1; }
  }

  /* ============================== VIDEO AMBIENTAL ============================== */
  .ambient-video{
    transform:translateZ(0);
    transition:transform .9s var(--ease-out), filter .45s ease, opacity .6s ease;
    backface-visibility:hidden;
  }
  /* El hero se atenuaba al 82 % y con un velo muy cargado: la imagen se veía turbia y
     eso se leía como "mala calidad". Ahora se aclara y se le da algo más de cuerpo, y el
     contraste del texto se resuelve con un degradado más limpio + sombra en la tipografía. */
  .hero-media{ filter:brightness(.92) contrast(1.05) saturate(1.08); }
  .hero-veil{
    pointer-events:none;
    background:
      linear-gradient(90deg, rgba(20,15,13,.58) 0%, rgba(20,15,13,.22) 46%, rgba(20,15,13,0) 74%),
      linear-gradient(180deg, rgba(20,15,13,.34) 0%, rgba(20,15,13,0) 36%, rgba(20,15,13,.58) 100%),
      /* viñeta muy suave: cierra el encuadre y da lectura de cine */
      radial-gradient(120% 88% at 50% 46%, rgba(20,15,13,0) 52%, rgba(20,15,13,.34) 100%);
  }
  .hero-text h1,
  .hero-text > .max-w-3xl > p{ text-shadow:0 2px 20px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.4); }
  .hero-text .eyebrow{ text-shadow:0 1px 8px rgba(0,0,0,.45); }
  /* En móvil el texto ocupa todo el ancho: velo vertical más marcado y video algo más oscuro */
  @media (max-width:768px){
    .hero-media{ filter:brightness(.84) contrast(1.05) saturate(1.08); }
    .hero-veil{
      background:
        linear-gradient(180deg, rgba(20,15,13,.42) 0%, rgba(20,15,13,.2) 38%, rgba(20,15,13,.7) 100%),
        radial-gradient(130% 80% at 50% 44%, rgba(20,15,13,0) 55%, rgba(20,15,13,.3) 100%);
    }
    .hero-text h1,
    .hero-text > .max-w-3xl > p{ text-shadow:0 2px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55); }
  }
  @media (hover:hover) and (pointer:fine){
    .group:hover .ambient-video{ transform:scale(1.035); filter:saturate(1.08); }
  }

  /* ============================== EXPERIENCIAS (mosaico editorial) ==============================
     Retícula asimétrica de 6 columnas. Cada tarjeta ocupa un número distinto de
     columnas (full 6 · wide 4 · half 3 · tall 2) y tiene su propia proporción,
     asignada según la orientación real del video o la fotografía. */
  .exp-mosaic{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:clamp(.75rem, 1.1vw, 1.35rem);
  }
  .exp-b-full{ grid-column:span 6; aspect-ratio:16/7; }
  .exp-b-wide{ grid-column:span 4; aspect-ratio:16/10; }
  .exp-b-half{ grid-column:span 3; aspect-ratio:3/2; }
  .exp-b-tall{ grid-column:span 2; aspect-ratio:4/5; }

  /* Tablet: dos bloques por fila */
  @media (max-width:1023px){
    .exp-mosaic{ grid-template-columns:repeat(2,1fr); }
    .exp-b-full{ grid-column:span 2; aspect-ratio:16/9; }
    .exp-b-wide{ grid-column:span 2; aspect-ratio:16/9; }
    .exp-b-half{ grid-column:span 1; aspect-ratio:4/5; }
    .exp-b-tall{ grid-column:span 1; aspect-ratio:4/5; }
  }
  /* Teléfono: una sola columna, proporciones más altas para que el motivo se lea */
  @media (max-width:639px){
    .exp-mosaic{ grid-template-columns:1fr; }
    .exp-b-full,.exp-b-wide{ grid-column:span 1; aspect-ratio:4/3; }
    .exp-b-half,.exp-b-tall{ grid-column:span 1; aspect-ratio:4/5; }
  }

  .exp-card{
    position:relative; display:block; width:100%;
    overflow:hidden; background:#211b19;
    border:1px solid var(--line-light);
    transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  }
  .exp-card .exp-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .exp-card .exp-media.ambient-video{ transition:transform .9s var(--ease-out); }
  .exp-card .exp-scrim{
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(20,16,14,0) 30%, rgba(20,16,14,.30) 58%, rgba(20,16,14,.88) 100%),
      linear-gradient(90deg, rgba(20,16,14,.34) 0%, rgba(20,16,14,0) 46%);
  }
  .exp-card .exp-body{
    position:absolute; inset:auto 0 0 0;
    padding:clamp(1.15rem, 1.6vw, 2rem) clamp(1.15rem, 1.6vw, 2.1rem) clamp(1.2rem, 1.7vw, 2.05rem);
  }
  .exp-card .exp-num{ color:rgba(245,240,230,.55); }
  .exp-card .exp-title{ font-family:"Playfair Display",serif; font-size:1.35rem; line-height:1.05; color:#F5F0E6; }
  /* Los bloques grandes son las piezas destacadas: titulares mayores y descripción más ancha */
  .exp-b-full .exp-title{ font-size:clamp(1.75rem, 3.4vw, 3rem); }
  .exp-b-wide .exp-title{ font-size:clamp(1.5rem, 2.2vw, 2.1rem); }
  .exp-b-half .exp-title{ font-size:clamp(1.4rem, 1.8vw, 1.75rem); }
  .exp-card .exp-desc{
    color:rgba(245,240,230,.78); font-size:.82rem; line-height:1.35; margin-top:.4rem;
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .5s var(--ease-out), opacity .4s ease, margin-top .4s ease;
  }
  .exp-card .exp-tag{
    position:absolute; top:.85rem; left:.85rem;
    background:rgba(245,240,230,.92); color:#2C2522;
  }
  .exp-card .exp-play{
    position:absolute; top:.85rem; right:.85rem; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(20,16,14,.45); color:#F5F0E6; backdrop-filter:blur(4px);
    border:1px solid rgba(245,240,230,.35);
  }
  .exp-card:focus-visible{ outline:2px solid #B0795F; outline-offset:3px; }
  /* La descripción se muestra siempre; en desktop el zoom y la sombra se realzan al pasar el cursor */
  .exp-card .exp-desc{ max-height:6.5rem; opacity:1; margin-top:.4rem; }
  /* Piezas destacadas: texto de apoyo algo mayor y medido en ancho de lectura */
  .exp-b-full .exp-desc,
  .exp-b-wide .exp-desc{ font-size:.92rem; line-height:1.45; max-width:46ch; }
  @media (hover:hover) and (pointer:fine){
    .exp-card:hover{ transform:translateY(-3px); box-shadow:0 34px 74px -36px rgba(0,0,0,.7); }
    .exp-card:hover .exp-media{ transform:scale(1.05); }
  }

  /* Filtro activo */
  .filter-btn{
    transition:background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s var(--ease-out);
  }
  .filter-btn[aria-pressed="true"]{ background:#2C2522; color:#F5F0E6; border-color:#2C2522; }
  .filter-btn:focus-visible{ outline:2px solid #B0795F; outline-offset:3px; }
  @media (hover:hover) and (pointer:fine){
    .filter-btn:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
  }

  /* ============================== MODAL ============================== */
  .modal-shell{ transition:opacity .34s ease; }
  .modal-sheet{ transition:transform .42s var(--ease-out), opacity .34s ease; box-shadow:0 28px 80px rgba(20,16,14,.24); }
  .modal-main-wrap{ position:relative; cursor:zoom-in; }
  .modal-thumb{
    transition:border-color .22s ease, opacity .22s ease, transform .22s var(--ease-out), box-shadow .22s ease;
  }
  .modal-thumb[aria-pressed="true"]{ box-shadow:0 0 0 1px #2C2522; }
  .modal-thumb:focus-visible{ outline:2px solid #B0795F; outline-offset:2px; }
  .modal-main-img{ transition:opacity .22s ease, transform .32s var(--ease-out); }
  .modal-main-img.is-swapping{ opacity:.45; transform:scale(1.015); }
  .modal-zoom-hint{
    position:absolute; bottom:.6rem; right:.6rem; z-index:2;
    background:rgba(44,37,34,.72); color:#F5F0E6; padding:.35rem .6rem;
    letter-spacing:.14em;
  }
  .modal-nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:rgba(245,240,230,.86); color:#2C2522; font-size:1.4rem; line-height:1;
    border:1px solid var(--line); transition:background-color .25s ease, color .25s ease;
  }
  .modal-nav:hover{ background:#2C2522; color:#F5F0E6; }
  .modal-nav.prev{ left:.6rem; } .modal-nav.next{ right:.6rem; }
  .modal-nav:focus-visible{ outline:2px solid #B0795F; outline-offset:2px; }

  /* ============================== LIGHTBOX ============================== */
  .lightbox{ transition:opacity .32s ease; }
  .lightbox-backdrop{ background:rgba(18,14,12,.94); backdrop-filter:blur(6px); }
  .lightbox-stage{
    position:absolute; inset:0; margin:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:64px 16px 132px;
  }
  .lightbox-img{
    max-width:min(96vw,1400px); max-height:calc(100svh - 200px);
    width:auto; height:auto; object-fit:contain;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    transition:opacity .28s ease, transform .38s var(--ease-out);
  }
  .lightbox-img.is-swapping{ opacity:.35; transform:scale(1.01); }
  .lightbox-caption{
    margin-top:14px; color:rgba(245,240,230,.8); font-size:.82rem; text-align:center;
    font-family:"Space Mono",monospace; letter-spacing:.06em;
  }
  .lb-btn{
    position:absolute; z-index:2; color:#F5F0E6;
    display:flex; align-items:center; justify-content:center;
    background:rgba(245,240,230,.1); border:1px solid rgba(245,240,230,.28);
    backdrop-filter:blur(6px); transition:background-color .25s ease, transform .25s var(--ease-out);
    -webkit-tap-highlight-color:transparent;
  }
  .lb-btn:hover{ background:rgba(245,240,230,.22); }
  .lb-btn:focus-visible{ outline:2px solid #B0795F; outline-offset:3px; }
  .lb-close{ top:16px; right:16px; width:46px; height:46px; font-size:1.7rem; line-height:1; }
  .lb-prev,.lb-next{ top:calc(50% - 66px); transform:translateY(-50%); width:52px; height:52px; font-size:2rem; line-height:1; }
  .lb-prev{ left:14px; } .lb-next{ right:14px; }
  .lb-prev:hover{ transform:translateY(-50%) translateX(-2px); }
  .lb-next:hover{ transform:translateY(-50%) translateX(2px); }
  .lightbox-thumbs{
    position:absolute; left:0; right:0; bottom:46px; z-index:2;
    display:flex; gap:8px; overflow-x:auto; padding:0 16px;
    justify-content:flex-start; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  }
  @media (min-width:640px){ .lightbox-thumbs{ justify-content:center; } }
  .lightbox-thumbs::-webkit-scrollbar{ height:6px; }
  .lightbox-thumbs::-webkit-scrollbar-thumb{ background:rgba(245,240,230,.25); border-radius:3px; }
  .lb-thumb{
    flex:0 0 auto; width:64px; height:48px; overflow:hidden; opacity:.5;
    border:1px solid transparent; transition:opacity .25s ease, border-color .25s ease, transform .25s ease;
  }
  .lb-thumb img{ width:100%; height:100%; object-fit:cover; }
  .lb-thumb[aria-current="true"]{ opacity:1; border-color:#B0795F; }
  .lb-thumb:focus-visible{ outline:2px solid #B0795F; outline-offset:2px; }
  .lightbox-counter{
    position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:2;
    color:rgba(245,240,230,.8); font-size:.78rem; letter-spacing:.14em;
  }

  /* ============================== FAQ ============================== */
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .42s var(--ease-soft); }
  .faq-item[data-open="true"] .faq-plus{ transform:rotate(45deg); }
  .faq-plus{ transition:transform .32s var(--ease-out); }
  .faq-q:focus-visible{ outline:2px solid #B0795F; outline-offset:4px; }

  /* Navbar al hacer scroll */
  #nav{
    transition:background-color .36s ease, color .3s ease, box-shadow .36s ease, backdrop-filter .36s ease;
  }
  #nav [data-nav-border],
  #nav [data-nav-cta]{ transition:border-color .32s ease, background-color .28s ease, color .28s ease; }
  #nav.is-solid{
    background:rgba(245,240,230,.92);
    color:#2C2522;
    backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(44,37,34,.06);
  }
  #nav.is-solid [data-nav-border],
  #nav.is-solid [data-nav-cta]{ border-color:var(--line); }

  /* Menú móvil */
  #mobileMenu{
    transform:translate3d(0,-10px,0);
    transition:opacity .3s ease, visibility .3s ease, transform .36s var(--ease-out);
  }
  #mobileMenu.is-open{ transform:none; }

  /* ============================== CTA FINAL — FRASE SOBRE VIDEO ============================== */
  /* Capa oscura + degradado radial detrás del texto para legibilidad permanente,
     incluso cuando cambia la iluminación del video. */
  .cta-scrim{
    pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 52%, rgba(20,15,13,.66) 0%, rgba(20,15,13,.5) 45%, rgba(20,15,13,.62) 100%),
      linear-gradient(180deg, rgba(20,15,13,.55) 0%, rgba(20,15,13,.35) 40%, rgba(20,15,13,.72) 100%);
  }
  .cta-phrase{
    color:#F7F2E8;
    text-shadow:0 2px 22px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55);
    letter-spacing:.005em;
  }
  .cta-phrase .italic{ color:#F1E4D6; }

  /* ============================== REFINAMIENTOS DE LUJO (sutiles) ============================== */
  /* Profundidad cálida permanente en las tarjetas, sin alterar el diseño */
  .card{ box-shadow:0 14px 34px -30px rgba(44,37,34,.55); }
  @media (hover:hover) and (pointer:fine){
    .card:hover{ box-shadow:0 34px 74px -34px rgba(44,37,34,.6); }
    .card:hover .card-img{ filter:saturate(1.06) contrast(1.02); }
  }
  /* Botones de acento: ligera respiración tipográfica al pasar el cursor */
  a.eyebrow, button.eyebrow{ transition:background-color .3s ease, color .3s ease, border-color .3s ease, letter-spacing .35s var(--ease-out), box-shadow .35s var(--ease-out); }
  @media (hover:hover) and (pointer:fine){
    a.eyebrow:hover,
    button.eyebrow:hover{ letter-spacing:.26em; }
    a.eyebrow.bg-terra:hover,
    a.eyebrow.bg-paper:hover{ box-shadow:0 16px 34px -16px rgba(44,37,34,.45); }
  }
  /* Subrayado editorial para los enlaces del nav en desktop */
  .nav-link{ position:relative; }
  .nav-link::after{
    content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .34s var(--ease-out); opacity:.7;
  }
  @media (hover:hover) and (pointer:fine){ .nav-link:hover::after{ transform:scaleX(1); } }
  /* Imágenes editoriales (Santiago / CTA): contraste cálido más cuidado */
  #santiago img{ filter:saturate(1.04) contrast(1.02); }
  /* Realce suave de la imagen principal del modal */
  .modal-main-img{ filter:saturate(1.04); }

  /* ============================== BOTÓN FLOTANTE DE RESERVA ==============================
     Reservar siempre a un toque. Aparece al pasar la portada (clase .is-visible desde JS)
     y se esconde cuando hay un modal o el visor abiertos (.is-hidden). */
  .wa-fab{
    position:fixed; z-index:60;
    right:1.25rem; bottom:1.25rem;
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.95rem 1.35rem;
    background:var(--terra, #B0795F); color:#F5F0E6;
    border:1px solid rgba(245,240,230,.22);
    font-family:"Space Mono", monospace;
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    box-shadow:0 18px 42px -16px rgba(44,37,34,.62);
    /* Estado inicial: fuera de vista, sin capturar clics */
    opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out),
               visibility .5s, background-color .3s ease, box-shadow .35s var(--ease-out);
  }
  .wa-fab.is-visible{ opacity:1; visibility:visible; transform:none; }
  .wa-fab.is-hidden{ opacity:0 !important; visibility:hidden !important; transform:translateY(14px) scale(.97) !important; }
  .wa-fab-icon{ width:19px; height:19px; flex-shrink:0; }
  @media (hover:hover) and (pointer:fine){
    .wa-fab:hover{ background:var(--terradeep, #8F6244); box-shadow:0 24px 54px -18px rgba(44,37,34,.7); }
  }
  .wa-fab:focus-visible{ outline:2px solid #F5F0E6; outline-offset:3px; }

  /* Teléfono: barra ancha, cómoda para el pulgar y respetando el área segura de iOS */
  @media (max-width:640px){
    .wa-fab{
      left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
      justify-content:center; padding:1.05rem 1rem; font-size:.7rem;
    }
  }

  /* ============================== ENTRADA DEL VIDEO ==============================
     No se toca la opacidad del <video>: el poster forma parte del propio elemento, así
     que atenuarlo dejaría un hueco vacío si el autoplay falla o la red va lenta.
     En su lugar, al empezar a reproducirse se relaja un encuadre mínimamente ampliado,
     lo que produce un asentamiento suave del poster al video. */
  .ambient-video{ transform:scale(1.028); }
  .ambient-video.is-playing{ transform:scale(1); }
  @media (prefers-reduced-motion: reduce){
    .ambient-video{ transform:none; transition:none; }
  }

  /* ============================== REVELADO DE TITULARES ==============================
     Los títulos de sección suben tras una máscara, en lugar de solo aparecer. */
  .reveal-title{ overflow:hidden; }
  .reveal-title > span{
    display:block;
    transform:translateY(105%);
    transition:transform 1.05s var(--ease-soft);
    transition-delay:var(--reveal-delay, 0ms);
  }
  .reveal-title.in > span{ transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal-title > span{ transform:none; transition:none; }
  }

  /* Cifras del entorno: leve realce al entrar */
  .stat-num{ font-variant-numeric:tabular-nums; }

  /* ============================== AFINADO DE LUJO ==============================
     Refinamientos de detalle sobre la identidad ya aprobada (no cambia colores ni
     tipografías): el lujo viene del ajuste fino, no de añadir adornos. */

  /* 1. Titulares con tracking ligeramente cerrado: es lo que distingue una serif
        editorial cara de una serif por defecto. */
  .font-display{ letter-spacing:-.015em; }
  h1.font-display, h2.font-display{ letter-spacing:-.022em; }

  /* 2. Cursivas de acento con un punto más de aire, para que respiren dentro del titular */
  .font-display em,
  .font-display .italic{ letter-spacing:-.008em; padding-right:.04em; }

  /* 3. Texto corrido más legible y con mejor color de lectura */
  p{ text-wrap:pretty; }
  .text-inksoft{ color:#6A5E54; }

  /* 4. Sombras cálidas en vez de grises: las sombras neutras "abaratan" sobre papel crema */
  :root{
    --shadow-soft: 0 26px 70px -28px rgba(74,54,40,.22);
    --shadow-lift: 0 34px 80px -30px rgba(74,54,40,.30);
  }

  /* 5. Hairlines más finas y cálidas */
  :root{
    --line: rgba(74,54,40,.13);
    --line-strong: rgba(74,54,40,.24);
  }

  /* 6. Botones: recorrido de relleno en vez de un cambio de color plano */
  .eyebrow.border{ position:relative; overflow:hidden; isolation:isolate; }
  .eyebrow.border::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:currentColor; opacity:.08;
    transform:scaleX(0); transform-origin:left;
    transition:transform .5s var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    .eyebrow.border:hover::before{ transform:scaleX(1); }
  }

  /* 7. Viñeta muy leve en las tarjetas de experiencia: cierra el encuadre.
        Va dentro del propio scrim (no como ::after) para no pintarse encima del texto. */
  .exp-card .exp-scrim{
    background:
      linear-gradient(180deg, rgba(20,16,14,0) 30%, rgba(20,16,14,.30) 58%, rgba(20,16,14,.88) 100%),
      linear-gradient(90deg, rgba(20,16,14,.34) 0%, rgba(20,16,14,0) 46%),
      radial-gradient(125% 92% at 50% 45%, rgba(20,16,14,0) 60%, rgba(20,16,14,.26) 100%);
  }
  /* El texto siempre por encima de cualquier velo */
  .exp-card .exp-body,
  .exp-card .exp-tag,
  .exp-card .exp-play{ z-index:2; }

  /* 8. Imágenes de tarjeta con un punto de contraste y calidez uniforme */
  .card-img, .exp-media, .modal-main-img{ filter:saturate(1.05) contrast(1.02); }

  /* 9. Aire extra entre secciones en pantallas grandes: el espacio es lo que más
        comunica categoría. Se excluye la portada, que usa altura completa. */
  @media (min-width:1280px){
    section:not(#inicio) > .max-w-\[1400px\]:not(.hero-text){
      padding-top:8.5rem; padding-bottom:8.5rem;
    }
  }

  /* ==========================================================================
     ADAPTACIÓN A TELÉFONO  (≤640 px)
     Mismo HTML, mismos contenidos y mismos enlaces: solo cambia el acomodo.
     La página móvil medía 28 pantallas de alto; aquí se reorganiza para que
     quepa en un recorrido razonable sin ocultar información.
     ========================================================================== */
  @media (max-width:640px){

    /* --- 1. Aire vertical: se reduce el padding de sección (la portada no se toca) --- */
    section:not(#inicio) > .max-w-\[1400px\]{
      padding-top:3.25rem !important;
      padding-bottom:3.25rem !important;
    }

    /* --- 2. Experiencias: de mosaico a carrusel horizontal deslizable ---------------
       Una tarjeta completa + un adelanto de la siguiente, con anclaje de scroll. */
    .exp-mosaic{
      display:flex;
      grid-template-columns:none;
      gap:.7rem;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      /* sangra hasta el borde de la pantalla sin desbordar la página */
      margin-inline:-1.25rem;
      padding-inline:1.25rem;
      scroll-padding-inline:1.25rem;
    }
    .exp-mosaic::-webkit-scrollbar{ display:none; }
    .exp-mosaic > .exp-card{
      flex:0 0 82%;
      scroll-snap-align:start;
      grid-column:auto;
      aspect-ratio:4/5;
    }
    /* Todas las tarjetas igualadas en el carrusel */
    .exp-b-full, .exp-b-wide, .exp-b-half, .exp-b-tall{ aspect-ratio:4/5; }
    .exp-b-full .exp-title, .exp-b-wide .exp-title, .exp-b-half .exp-title{ font-size:1.3rem; }
    .exp-b-full .exp-desc, .exp-b-wide .exp-desc{ font-size:.8rem; }
    .exp-card .exp-desc{ max-height:4.2rem; }

    /* Indicadores del carrusel */
    .exp-dots{ display:flex; justify-content:center; gap:.4rem; margin-top:1rem; }
    .exp-dots button{
      width:6px; height:6px; border-radius:50%;
      background:rgba(245,240,230,.28); border:0; padding:0;
      transition:background-color .3s ease, transform .3s var(--ease-out);
    }
    .exp-dots button[aria-current="true"]{ background:#B0795F; transform:scale(1.5); }

    /* --- 3. Estancias: tarjeta horizontal compacta (antes ocupaba media pantalla) --- */
    .card{ display:flex; align-items:stretch; }
    .card > div:first-child{ flex:0 0 38%; aspect-ratio:3/4; }
    .card > div:last-child{
      flex:1 1 auto; padding:.85rem .95rem;
      display:flex; flex-direction:column; justify-content:center; min-width:0;
    }
    .card h3{ font-size:1.3rem; }
    .card .font-mono.text-\[\.72rem\]{ margin-top:.35rem; }
    .card .grid-cols-3{ margin-top:.7rem; }
    .card .grid-cols-3 > div{ padding-top:.5rem; padding-bottom:.5rem; }
    .card .eyebrow{ font-size:.58rem; padding:.25rem .5rem; top:.5rem; left:.5rem; }

    /* --- 4. Bloques de video de sección: más bajos, no a pantalla completa --------- */
    #naturaleza .aspect-\[4\/3\],
    #naturaleza .aspect-\[3\/4\]{ aspect-ratio:16/10; }
    #naturaleza .md\:mt-14{ margin-top:0; }
    #mascotas .aspect-\[3\/4\]{ aspect-ratio:16/10; }
    #incluye .aspect-\[4\/3\]{ aspect-ratio:16/10; }
    #incluye .aspect-\[16\/9\]{ aspect-ratio:16/10; }

    /* --- 5. Titulares y textos algo más contenidos -------------------------------- */
    h2.font-display{ font-size:clamp(1.6rem,7vw,2.1rem); }
    .eyebrow{ font-size:.6rem; }

    /* --- 6. Cifras del entorno en dos filas compactas ------------------------------ */
    #naturaleza .grid-cols-2{ gap:1.25rem; margin-top:2.25rem; }
    #naturaleza .font-display.text-4xl{ font-size:2rem; }
  }

  /* --- Tablet: reorganiza sin deformar ------------------------------------------- */
  @media (min-width:641px) and (max-width:1023px){
    section:not(#inicio) > .max-w-\[1400px\]{ padding-top:4.5rem; padding-bottom:4.5rem; }
  }

  /* ===== Ajustes finos de teléfono (segunda pasada) ===== */
  @media (max-width:640px){
    /* En varias secciones el contenedor ancho ES la propia <section>, así que también
       hay que reducir su padding vertical (antes solo se cubrían los hijos). */
    section.max-w-\[1400px\]{
      padding-top:3.25rem !important;
      padding-bottom:3.25rem !important;
    }

    /* Videos "cinematográficos" de Glamping y Finca: en móvil eran 4/5 (media pantalla) */
    .aspect-\[4\/5\].sm\:aspect-\[16\/10\],
    .aspect-\[4\/5\].sm\:aspect-\[16\/11\]{ aspect-ratio:16/10; }

    /* Fotos verticales de la sección de eventos */
    #eventos .aspect-\[3\/4\]{ aspect-ratio:4/5; }
    #eventos .mt-8{ margin-top:1rem; }

    /* Amenidades de "Qué incluye": dos columnas compactas en vez de cuatro bloques apilados */
    #incluye .grid.sm\:grid-cols-2{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1.1rem .9rem;
    }
    #incluye .grid.sm\:grid-cols-2 ul{ font-size:.68rem; line-height:1.45; }
    #incluye .grid.sm\:grid-cols-2 ul li{ margin-bottom:.35rem; }
    #incluye .grid.sm\:grid-cols-2 .eyebrow{ font-size:.56rem; margin-bottom:.5rem; }

    /* Márgenes internos de bloques que se apilan */
    .mb-14{ margin-bottom:2rem; }
    .mb-12{ margin-bottom:1.75rem; }
    .mt-14{ margin-top:2rem; }
    .mt-12{ margin-top:1.75rem; }
    .mt-10{ margin-top:1.5rem; }
    .mb-8{ margin-bottom:1.25rem; }
    .gap-10{ gap:1.5rem; }
    .gap-12{ gap:1.75rem; }
  }

  /* ===== Tarjeta de estancia en teléfono: nombre y precio no caben en una fila ===== */
  @media (max-width:640px){
    /* Se apilan para que el precio nunca se corte */
    .card .flex.items-baseline.justify-between{
      flex-direction:column; align-items:flex-start; gap:.1rem;
    }
    .card h3{ font-size:1.15rem; line-height:1.1; }
    .card .font-mono.text-sm{ font-size:.8rem; }
    .card .grid-cols-3{ margin-top:.6rem; }
    .card .grid-cols-3 > div{ font-size:.68rem; }
    .card .grid-cols-3 .text-\[\.62rem\]{ font-size:.55rem; }
  }

  /* ==========================================================================
     RITMO DEL RECORRIDO (4 actos)
     Dos parejas de secciones comparten fondo a propósito porque tratan el mismo
     tema: se les quita la costura para que se lean como un solo bloque.
     ========================================================================== */
  /* La finca insignia: su entorno (lagos y río) + pet friendly, grabado allí mismo */
  #naturaleza > div{ padding-bottom:2rem; }
  #mascotas  > div{ padding-top:2rem; }
  /* Cierre: cómo se reserva + lo que dicen los huéspedes */
  #comoFunciona > div{ padding-bottom:1.5rem; }
  #testimonios  > div{ padding-top:1.5rem; }

  @media (min-width:1280px){
    #naturaleza > .max-w-\[1400px\]{ padding-bottom:3rem !important; }
    #mascotas  > .max-w-\[1400px\]{ padding-top:3rem !important; }
  }
  @media (max-width:640px){
    #naturaleza > div{ padding-bottom:1rem !important; }
    #mascotas  > div{ padding-top:1rem !important; }
  }

  /* ==========================================================================
     PALETA — VERDE PINO
     El acento pasa de terracota a verde pino, que es el color real del entorno
     (bosque de pino de la Sierra de Santiago). La madera entra como neutro
     cálido, no como segundo acento: un solo sistema para toda la página.
     Se redefinen las clases ya compiladas de Tailwind en lugar de regenerarlas.
     ========================================================================== */
  :root{
    --pino:        #3F6B54;   /* acento sobre fondo claro */
    --pino-hondo:  #2C4A3A;   /* rellenos y estados activos */
    --pino-claro:  #8FB49C;   /* acento sobre fondo oscuro (contraste 6.7:1) */
    --madera:      #A9855F;   /* neutro cálido: filetes y detalles */
    --madera-suave:#C9A77F;
  }

  .text-terra{ color:var(--pino) !important; }
  .border-terra{ border-color:var(--pino) !important; }
  .bg-terra{ background-color:var(--pino-hondo) !important; }
  .bg-terradeep{ background-color:#243B2E !important; }

  /* Sobre los fondos oscuros el verde profundo no se leería: se aclara a salvia */
  .bg-ink .text-terra,
  #experiencias .text-terra,
  #faq .text-terra,
  #incluye .text-terra,
  footer .text-terra{ color:var(--pino-claro) !important; }

  @media (hover:hover) and (pointer:fine){
    .hover\:text-terra:hover{ color:var(--pino) !important; }
    .bg-ink .hover\:text-terra:hover,
    #nav:not(.is-solid) .hover\:text-terra:hover{ color:var(--pino-claro) !important; }
    .hover\:bg-terra:hover{ background-color:var(--pino-hondo) !important; }
    .hover\:bg-terradeep:hover{ background-color:#243B2E !important; }
  }

  /* Elementos que llevaban el terracota en duro */
  #scrollProgress{ background:linear-gradient(90deg,var(--pino),var(--pino-hondo)); }
  ::selection{ background:var(--pino); color:#F5F0E6; }
  .exp-dots button[aria-current="true"]{ background:var(--pino-claro); }
  .card:focus-visible,
  .exp-card:focus-visible{ outline-color:var(--pino); }
  .wa-fab{ background:var(--pino-hondo); }
  @media (hover:hover) and (pointer:fine){
    .wa-fab:hover{ background:#243B2E; }
  }

  /* Madera como neutro cálido en los filetes (antes eran café grisáceo) */
  :root{
    --line:        rgba(169,133,95,.22);
    --line-strong: rgba(169,133,95,.40);
  }
  /* Las cifras destacadas y los números de sección toman el verde */
  .stat-num{ color:var(--pino) !important; }

  /* Etiquetas de "Qué puedes hacer aquí" dentro del detalle de cada estancia:
     verde pino suave para distinguirlas de las amenidades (que van con filete). */
  .exp-chip{
    background:rgba(63,107,84,.09);
    border:1px solid rgba(63,107,84,.28);
    color:var(--pino);
    letter-spacing:.04em;
  }

  /* ==========================================================================
     AFINADO DE LUJO · SEGUNDA PASADA
     Lo que restaba categoría no era el color, era el acabado: fichas con borde,
     tabla de especificaciones y filtros con caja. Se pasa a un tratamiento
     editorial: la fotografía manda y el texto la acompaña con aire.
     ========================================================================== */

  /* --- Tarjeta de estancia: sin caja, la foto flota sobre el papel ----------- */
  .card{ background:transparent; border:0; }
  .card .card-media{
    box-shadow:0 26px 60px -34px rgba(74,54,40,.45);
    transition:box-shadow .6s var(--ease-out);
  }
  .card-body{ padding:1.35rem .15rem 0; }
  .card-price{ font-size:.9rem; letter-spacing:.01em; }
  .card-price span{ font-size:.68rem; }
  .card-loc{ font-size:.72rem; margin-top:.55rem; line-height:1.5; }
  .card-specs{
    font-size:.72rem; margin-top:.85rem; padding-top:.85rem;
    border-top:1px solid var(--line);
  }
  /* Etiqueta de tipo: fuera de la fotografía (encima se perdía sobre fondos claros),
     ahora abre el bloque de texto como un antetítulo editorial. */
  .card-type{
    color:var(--pino, #3F6B54);
    font-size:.58rem; letter-spacing:.26em;
    margin-bottom:.7rem;
  }
  @media (hover:hover) and (pointer:fine){
    .card:hover{ transform:translate3d(0,-5px,0); box-shadow:none; }
    .card:hover .card-media{ box-shadow:0 40px 84px -34px rgba(74,54,40,.55); }
  }

  /* --- Filtros: de botones con caja a texto con subrayado -------------------- */
  .filter-btn{
    border:0 !important; background:transparent !important;
    padding:.5rem 0 !important; margin-right:2rem;
    color:var(--pino-hondo, #2C4A3A); opacity:.5;
    position:relative;
    transition:opacity .45s var(--ease-out), color .45s ease;
  }
  .filter-btn::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .5s var(--ease-out);
  }
  /* El estado activo traía texto crema de la versión con caja oscura: al quitarle
     el fondo quedaría invisible sobre el papel, así que se fuerza el verde. */
  .filter-btn[aria-pressed="true"]{
    opacity:1;
    color:var(--pino-hondo, #2C4A3A) !important;
  }
  .filter-btn[aria-pressed="true"]::after{ transform:scaleX(1); }
  @media (hover:hover) and (pointer:fine){
    .filter-btn:hover{ opacity:.85; }
    .filter-btn:hover::after{ transform:scaleX(1); }
  }
  @media (max-width:640px){ .filter-btn{ margin-right:1.25rem; } }

  /* --- Movimiento más pausado: la prisa abarata ------------------------------ */
  .card-img{ transition:transform 1.15s var(--ease-out); }
  @media (hover:hover) and (pointer:fine){
    .card:hover .card-img{ transform:scale(1.06); }
  }

  /* --- El grano se aligera: a 3.5 % enturbiaba el crema ---------------------- */
  .grain{ opacity:.022; }

  /* ==========================================================================
     PALETA DE MARCA · ajuste a los letreros de Univox
     Referencia: rótulos y señalética reales (verde bosque profundo + crema +
     dorado latón, sobre madera envejecida). Tres correcciones:
       1. El verde era demasiado claro y apagado → se profundiza.
       2. Faltaba el DORADO, que es el acento real de la marca.
       3. La madera estaba declarada pero sin usar → entra como material
          (veta y filetes), no como color de relleno.
     ========================================================================== */
  :root{
    --pino:        #235240;   /* acento sobre fondo claro (era #3F6B54) */
    --pino-hondo:  #1A3D2E;   /* rellenos, secciones oscuras y estados activos */
    --pino-claro:  #9CC0A9;   /* acento sobre fondo oscuro */
    --oro:         #C6A664;   /* latón: filetes, antetítulos y detalles sobre verde */
    --oro-claro:   #DCC894;
    --madera:      #6B4F35;   /* madera envejecida de los postes */
    --madera-clara:#8A6A48;
    /* Filete dorado sobre fondo oscuro, como el borde de los rótulos */
    --line-light:  rgba(198,166,100,.30);
  }

  /* --- Las secciones oscuras dejan de ser espresso y pasan a verde bosque ---- */
  section.bg-ink,
  footer.bg-ink{ background-color:var(--pino-hondo) !important; }

  /* Veta de madera muy tenue: evoca el letrero pintado sobre tabla, sin dibujarse */
  section.bg-ink{ position:relative; isolation:isolate; }
  section.bg-ink::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.008) 0 2px, transparent 2px 23px),
      repeating-linear-gradient(90deg,
        rgba(0,0,0,.022) 0 3px, transparent 3px 41px);
  }

  /* --- El dorado toma el lugar del verde salvia como acento sobre lo oscuro --- */
  .bg-ink .text-terra,
  #experiencias .text-terra,
  #faq .text-terra,
  #incluye .text-terra,
  footer .text-terra{ color:var(--oro) !important; }
  .exp-card .exp-tag{ background:var(--oro-claro); color:#1A3D2E; }
  .exp-dots button[aria-current="true"]{ background:var(--oro); }

  /* --- Filetes de madera: los detalles que faltaban ------------------------- */
  /* Línea superior de la ficha técnica y separadores, en madera y no en gris */
  .card-specs{ border-top-color:rgba(107,79,53,.28); }
  .hair-b, .hair-t, .hair{ border-color:rgba(107,79,53,.20); }
  /* Sobre verde, el filete es dorado */
  .bg-ink .hair-b,
  .bg-ink .hair-t,
  .bg-ink .hair{ border-color:var(--line-light); }

  /* Botón flotante: verde profundo con filete dorado, como los rótulos */
  .wa-fab{
    background:var(--pino-hondo);
    border:1px solid var(--oro);
    color:var(--oro-claro);
  }
  @media (hover:hover) and (pointer:fine){
    .wa-fab:hover{ background:#14311F; color:#F0E7CF; }
  }

  /* Barra de progreso: verde a dorado */
  #scrollProgress{ background:linear-gradient(90deg,var(--pino-hondo),var(--oro)); }

  /* Antetítulo de la tarjeta y filtros: verde profundo nuevo */
  .card-type{ color:var(--pino); }
  .filter-btn{ color:var(--pino-hondo); }
  .filter-btn[aria-pressed="true"]{ color:var(--pino-hondo) !important; }

  /* ==========================================================================
     MADERA REAL · el verde es el panel, la madera es la estructura
     Antes las secciones oscuras eran verdes con una veta encima, y la veta no
     se leía como madera. Ahora la madera es un MATERIAL propio: color cálido de
     madera envejecida + veta irregular. Alterna con el verde de los rótulos.
     ========================================================================== */
  :root{
    --madera-hondo: #3A2B1F;   /* fondo de sección */
    --madera:       #5B4430;
    --madera-clara: #8A6A48;
  }

  /* Secciones que pasan a madera (las demás oscuras siguen en verde bosque) */
  #incluye,
  #faq,
  footer.bg-ink{ background-color:var(--madera-hondo) !important; }

  /* Veta creíble: varias capas de anchos distintos para que no se lea como rayas */
  #incluye::before,
  #faq::before,
  footer.bg-ink::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      repeating-linear-gradient(90deg,
        rgba(0,0,0,.10) 0 1px,
        rgba(255,255,255,.016) 1px 3px,
        transparent 3px 17px),
      repeating-linear-gradient(90deg,
        rgba(0,0,0,.10) 0 2px, transparent 2px 31px),
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.03) 0 1px, transparent 1px 53px),
      linear-gradient(180deg, rgba(255,255,255,.035) 0%, transparent 38%);
  }
  footer.bg-ink{ position:relative; isolation:isolate; }

  /* Sobre madera el dorado brilla más y el crema se calienta un punto */
  #incluye .text-terra,
  #faq .text-terra,
  footer .text-terra{ color:var(--oro-claro) !important; }
  #incluye .hair-b, #incluye .hair-t, #incluye .hair,
  #faq .hair-b, #faq .hair-t, #faq .hair,
  footer .hair-b, footer .hair-t{ border-color:rgba(198,166,100,.26); }

  /* El verde queda para los paneles de marca: portada de experiencias y la finca */
  section.bg-ink:not(#incluye):not(#faq){ background-color:var(--pino-hondo) !important; }

  /* ==========================================================================
     PASADA DE LUJO · ritmo y acabado
     Lo que restaba categoría: cada sección abría de una forma distinta y no
     había un hilo visual. Se unifica la entrada de sección (antetítulo + filete
     dorado) y se afina el acabado de los detalles.
     ========================================================================== */

  /* Antetítulo de sección: pequeño filete dorado que lo precede, como en los
     rótulos de la marca. Da un mismo punto de partida a todas las secciones. */
  section .eyebrow.text-terra{
    display:inline-flex; align-items:center; gap:.7rem;
  }
  section .eyebrow.text-terra::before{
    content:""; width:26px; height:1px; background:currentColor; opacity:.75;
    flex-shrink:0;
  }

  /* Titulares: interlineado más ceñido y mejor equilibrio de línea */
  h2.font-display{ line-height:1.06; text-wrap:balance; }
  h1.font-display{ text-wrap:balance; }

  /* Párrafo de apoyo bajo el titular: un punto más grande y aireado */
  section h2.font-display + p,
  section .reveal-title + p{ font-size:1.02rem; line-height:1.72; }

  /* Sombras: profundidad en dos planos (contacto + difusa), como en impresión */
  .card{
    box-shadow:0 1px 2px rgba(74,54,40,.05), 0 18px 44px -26px rgba(74,54,40,.20);
  }
  @media (hover:hover) and (pointer:fine){
    .card:hover{
      box-shadow:0 2px 4px rgba(74,54,40,.07), 0 40px 80px -30px rgba(74,54,40,.34);
    }
  }

  /* Botones: filete dorado y peso tipográfico más definido */
  /* Sin negrita: la letra pequeña se queda cuadrada por el tracking,
     no por el grosor (engordaba demasiado el trazo). */
  .eyebrow.border{ letter-spacing:.2em; font-weight:400; }
  .bg-terra{ box-shadow:0 12px 30px -14px rgba(26,61,46,.55); }

  /* Comillas de los testimonios en dorado y a mayor escala */
  #testimonios .font-display{ position:relative; }

  /* Filete dorado superior en las secciones de madera y verde: cierra el bloque */
  #incluye, #faq, #experiencias{ border-top:1px solid rgba(198,166,100,.22); }

  /* Las cifras del entorno, con más presencia */
  .stat-num{ letter-spacing:-.03em; }

  @media (max-width:640px){
    section .eyebrow.text-terra::before{ width:16px; }
    section h2.font-display + p{ font-size:.96rem; line-height:1.65; }
  }

  /* ==========================================================================
     ESCALA EDITORIAL · el salto que faltaba
     Los títulos de sección medían 48 px en una pantalla de 1440: correctos pero
     tímidos. El lujo editorial vive en el contraste de escala — titular enorme,
     texto de apoyo pequeño y mucho aire alrededor.
     ========================================================================== */
  section h2.font-display{
    font-size:clamp(2.1rem, 6.4vw, 5.6rem);
    line-height:.98;
    letter-spacing:-.032em;
  }
  /* El titular de portada sube en la misma proporción */
  #inicio h1{ letter-spacing:-.035em; line-height:.94; }

  /* Texto de apoyo: se mantiene pequeño a propósito, para que el contraste mande */
  section h2.font-display + p,
  section .reveal-title + p{ font-size:1rem; line-height:1.75; max-width:34ch; }

  /* Márgenes laterales generosos en pantallas grandes: el contenido deja de
     tocar los bordes y empieza a leerse como una página compuesta. */
  @media (min-width:1280px){
    .max-w-\[1400px\]{ padding-left:4rem; padding-right:4rem; }
  }
  @media (min-width:1600px){
    .max-w-\[1400px\]{ padding-left:6rem; padding-right:6rem; }
  }

  /* El antetítulo se separa más del titular: respiración entre los dos pesos */
  section .eyebrow.text-terra{ margin-bottom:1.6rem; }

  /* Revelado con máscara para TODOS los títulos de sección (lo aplica el JS) */
  .reveal-title{ overflow:hidden; padding-bottom:.08em; }

  @media (max-width:640px){
    section h2.font-display{ font-size:clamp(1.9rem, 9vw, 2.6rem); line-height:1.02; }
    section h2.font-display + p{ max-width:none; }
    section .eyebrow.text-terra{ margin-bottom:1rem; }
  }

  /* Cuando el titular ya sube con su propia máscara, el bloque padre solo
     aparece (sin desplazarse), para que no se sumen dos movimientos. */
  .reveal.reveal-sin-desplazar{ transform:none; }

  /* ==========================================================================
     CABAÑA Y MONTAÑA · madera, verde pino y letras crema
     El agua aporta frescura, pero la materia es cabaña: madera vista, verde de
     pino y tipografía crema. Las animaciones acompañan con peso, sin rebotes.
     ========================================================================== */

  /* --- Tipografía crema sobre los materiales oscuros ------------------------ */
  section.bg-ink h2.font-display,
  section.bg-ink h3,
  #incluye h2.font-display, #faq h2.font-display,
  footer h3{ color:#F2EADA; }

  /* --- Filete de madera que separa las secciones claras --------------------
     Como la junta entre dos tablas: dos líneas, una clara y una oscura. */
  section + section{ position:relative; }
  #estancias, #santiago, #comoFunciona, #testimonios{
    border-top:1px solid rgba(107,79,53,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  }

  /* --- Tarjetas de estancia: canto de madera al pasar el cursor ------------ */
  .card{ border:1px solid rgba(107,79,53,.16); }
  @media (hover:hover) and (pointer:fine){
    .card:hover{ border-color:rgba(107,79,53,.42); }
  }

  /* --- Acali: frescura de agua, pero encuadrada en madera ------------------
     Un reflejo muy tenue en el borde inferior del video, como luz sobre agua. */
  #casa-acali .relative.overflow-hidden::after{
    content:""; position:absolute; inset:auto 0 0 0; height:38%;
    pointer-events:none; z-index:1;
    background:linear-gradient(180deg,
      rgba(120,170,180,0) 0%,
      rgba(120,170,180,.10) 62%,
      rgba(90,140,155,.20) 100%);
    mix-blend-mode:screen;
  }
  #casa-acali .eyebrow.text-terra{ color:#5E8F86 !important; }

  /* --- Animaciones rústicas: entran con peso, se asientan, no rebotan ------ */
  :root{
    /* curva con "asentamiento": arranca decidido y frena despacio, como algo
       de madera que se apoya. Nada de rebote. */
    --ease-madera: cubic-bezier(.2,.72,.24,1);
  }
  .reveal{
    transition:opacity .95s var(--ease-madera), transform .95s var(--ease-madera);
  }
  .reveal-title > span{ transition:transform 1.15s var(--ease-madera); }
  .reveal-img > img,
  .reveal-img > video{
    transition:clip-path 1.25s var(--ease-madera),
               transform 1.6s var(--ease-madera),
               opacity 1s ease;
  }
  .card{ transition:transform .55s var(--ease-madera), border-color .4s ease, box-shadow .55s var(--ease-madera); }
  .exp-card{ transition:transform .6s var(--ease-madera), box-shadow .6s var(--ease-madera); }

  /* El antetítulo dibuja su filete al entrar, como si se trazara */
  section .eyebrow.text-terra::before{
    transform-origin:left; transform:scaleX(0);
    transition:transform .9s var(--ease-madera) .15s;
  }
  .reveal.in .eyebrow.text-terra::before,
  section .eyebrow.text-terra.in::before{ transform:scaleX(1); }

  @media (prefers-reduced-motion: reduce){
    section .eyebrow.text-terra::before{ transform:scaleX(1); transition:none; }
  }

  /* ==========================================================================
     IDENTIDAD DE MARCA · lo que faltaba
     El sitio tenía el logo, pero no el vocabulario gráfico de Univox: la
     silueta de montaña, la ramita y los dos lemas de la señalética. Sin eso la
     página se leía como lujo genérico en lugar de como esta marca.
     ========================================================================== */

  /* Lema en versalitas, con la separación de los rótulos */
  .marca-lema{
    letter-spacing:.34em;
    font-size:.6rem;
  }

  /* Sello del pie: montaña + lemas, centrado y con filete arriba y abajo */
  .marca-sello{
    margin-top:4.5rem;
    padding:2.75rem 0 2.25rem;
    border-top:1px solid rgba(198,166,100,.24);
    text-align:center;
    color:var(--oro);
  }
  .marca-montana{
    width:118px; height:auto; display:block; margin:0 auto 1.15rem;
    color:var(--oro); opacity:.9;
  }
  .marca-sello .marca-lema{ color:var(--oro); opacity:.85; margin-bottom:.85rem; }
  .marca-frase{
    color:#F2EADA;
    font-size:clamp(1.5rem, 3.2vw, 2.35rem);
    letter-spacing:-.02em;
    line-height:1.1;
  }

  /* La montaña se dibuja sola al entrar en pantalla: trazo rústico, sin efectismo */
  .marca-sello.reveal .marca-montana path{
    stroke-dasharray:200;
    stroke-dashoffset:200;
    transition:stroke-dashoffset 1.8s var(--ease-madera) .2s;
  }
  .marca-sello.reveal.in .marca-montana path{ stroke-dashoffset:0; }

  /* Lema de la portada: se apoya en el velo del hero */
  #inicio .marca-lema{ text-shadow:0 1px 8px rgba(0,0,0,.5); }

  @media (prefers-reduced-motion: reduce){
    .marca-sello .marca-montana path{ stroke-dashoffset:0 !important; transition:none; }
  }
  @media (max-width:640px){
    .marca-lema{ letter-spacing:.26em; font-size:.55rem; }
    .marca-sello{ margin-top:3rem; padding:2rem 0 1.5rem; }
    .marca-montana{ width:92px; }
  }

  /* ==========================================================================
     MODAL DE DETALLE · de hoja de contactos a galería
     Las 15 miniaturas formaban una retícula de 5×3 (275 px de alto) que se leía
     como una hoja de contactos. Pasan a una tira horizontal deslizable: ocupa
     una sola fila, deja respirar la foto principal y se recorre con el dedo.
     ========================================================================== */
  .modal-tira{
    display:flex;
    gap:.5rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:.15rem;
  }
  .modal-tira::-webkit-scrollbar{ display:none; }
  .modal-thumb{
    flex:0 0 84px;
    aspect-ratio:1;
    scroll-snap-align:start;
    border:1px solid rgba(107,79,53,.20);
    opacity:.62;
    transition:opacity .45s var(--ease-madera), border-color .45s ease, transform .45s var(--ease-madera);
  }
  .modal-thumb img{ width:100%; height:100%; object-fit:cover; }
  .modal-thumb[aria-pressed="true"]{
    opacity:1;
    border-color:var(--pino);
    box-shadow:0 0 0 1px var(--pino);
  }
  @media (hover:hover) and (pointer:fine){
    .modal-thumb:hover{ opacity:1; transform:translateY(-2px); }
  }
  @media (max-width:640px){ .modal-thumb{ flex-basis:66px; } }

  /* --- Amenidades y experiencias: de botones a lista editorial -------------
     Las cajas rectangulares se leían como formulario. Se sustituyen por texto
     separado con filete, que es como lo presenta la señalética de la marca. */
  #modal .amenity,
  #modal .exp-chip{
    background:none !important;
    border:0 !important;
    border-left:1px solid rgba(107,79,53,.30) !important;
    border-radius:0 !important;
    padding:.1rem .85rem .1rem .7rem !important;
    margin:0 .15rem .55rem 0;
    color:var(--pino) !important;
    letter-spacing:.02em;
  }
  #modal .exp-chip{ color:#4A6B5C !important; }

  /* --- Identidad de material en el modal ----------------------------------
     El panel de datos llevaba el mismo crema que el fondo: ahora se apoya en
     un filete de madera y el precio se destaca sobre verde. */
  #modal .modal-datos,
  #modalContent > div:last-child{ border-left:1px solid rgba(107,79,53,.16); }
  #modal .eyebrow{ color:var(--pino); }

  /* La columna de la galería quedaba más corta que la de datos y dejaba un hueco
     muerto. Se convierte en columna flexible para que la foto principal crezca
     hasta igualar la altura del panel de la derecha. */
  @media (min-width:768px){
    #modalContent > div:first-child{ display:flex; flex-direction:column; }
    #modalContent .modal-main-wrap{
      flex:1 1 auto;
      aspect-ratio:auto;
      min-height:340px;
    }
    #modalContent .modal-tira{ flex:0 0 auto; }
  }

  /* La tira de miniaturas es un flex ancho (15 x 84 px). Dentro de un grid, un
     elemento no se encoge por debajo del tamano de su contenido (min-width:auto),
     asi que estiraba su columna y deformaba la foto principal. Con min-width:0
     la columna respeta el ancho del modal y la tira vuelve a deslizarse. */
  #modalContent > div{ min-width:0; }
  .modal-tira{ min-width:0; max-width:100%; }

  /* ==========================================================================
     AFINADO FINAL
     ========================================================================== */

  /* --- 1. El grano ensuciaba los materiales oscuros ------------------------
     Con mix-blend-mode:multiply el ruido solo oscurece: sobre crema aporta
     textura, pero sobre el verde y la madera apagaba el color en vez de darle
     grano. Con soft-light el ruido aclara y oscurece a la vez, así que funciona
     igual de bien sobre los dos materiales. */
  .grain{
    mix-blend-mode:soft-light;
    opacity:.10;
  }
  @media (max-width:640px){ .grain{ opacity:.07; } }

  /* --- 2. Filtros: de botones de interfaz a índice editorial ---------------
     Las cajas con borde eran lo primero que se veía al bajar y eran lo más
     genérico de la página. Pasan a texto con un filete que se traza, igual que
     los antetítulos de sección. */
  .filter-btn{
    border:0 !important;
    padding:.35rem 0 .55rem !important;
    margin-right:2rem;
    background:none !important;
    position:relative;
    color:rgba(44,37,34,.5) !important;
    transition:color .4s var(--ease-madera);
  }
  .filter-btn::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--pino);
    transform:scaleX(0); transform-origin:left;
    transition:transform .5s var(--ease-madera);
  }
  .filter-btn[aria-pressed="true"]{ color:var(--pino-hondo) !important; }
  .filter-btn[aria-pressed="true"]::after{ transform:scaleX(1); }
  @media (hover:hover) and (pointer:fine){
    .filter-btn:hover{ color:var(--pino-hondo) !important; }
    .filter-btn:hover::after{ transform:scaleX(1); background:rgba(107,79,53,.45); }
  }
  .filter-btn:focus-visible{ outline:2px solid var(--pino); outline-offset:4px; }
  @media (max-width:640px){ .filter-btn{ margin-right:1.25rem; } }

  /* --- 3. Tratamiento común de fotografía ---------------------------------
     El material mezcla sesión profesional y tomas de teléfono. Un mismo ajuste
     de calidez y contraste las hace leer como una sola colección. */
  .card-img,
  .exp-media,
  .modal-main-img,
  .modal-thumb img,
  #lbImg{
    filter:saturate(1.06) contrast(1.04) brightness(1.01);
  }

  /* El titular de Preguntas vive en una columna estrecha (~320 px): a 90 px la
     palabra "conviene" no cabía y la máscara del revelado la recortaba. Se le da
     una escala propia, acorde a su columna. */
  #faq h2.font-display{ font-size:clamp(1.8rem, 3.3vw, 3.1rem); line-height:1.04; }

  /* Red de seguridad: ningún titular debe desbordar su contenedor */
  section h2.font-display{ overflow-wrap:break-word; }

  /* ==========================================================================
     CORRECCIONES DE CONTRASTE (auditoría AA 4.5:1)
     Doce elementos quedaban por debajo del mínimo legible. Dos eran fallos
     introducidos al rediseñar los filtros y al dar acento propio a Acali.
     ========================================================================== */

  /* 1. Filtros inactivos: el gris al 50 % daba 2.99:1 */
  /* Café de marca sólido (6.6:1) en vez de un negro al 66% que se veía
     lavado. El estado activo conserva el verde, como afordancia. */
  .filter-btn{ color:#6B4F35 !important; }

  /* 2. Acento de Casa Acali: el verde agua claro daba 2.97:1 sobre crema.
        Se mantiene el matiz de agua, pero con la profundidad necesaria. */
  #casa-acali .eyebrow.text-terra,
  #casa-acali .js-wa.text-terra,
  #casa-acali .border-terra{ color:#2E5E54 !important; border-color:#2E5E54 !important; }

  /* 3. Textos secundarios sobre madera y verde: del 40-45 % al 62 % */
  footer .text-paper\/45,
  footer .text-paper\/40,
  #incluye .text-paper\/45{ color:rgba(245,240,230,.72) !important; }
  footer .text-paper\/40.text-\[\.7rem\]{ color:rgba(245,240,230,.62) !important; }

  /* ==========================================================================
     SISTEMA TIPOGRÁFICO ÚNICO
     Problema medido: 23 combinaciones de tamaño distintas (Playfair sola tenía
     11: 99/90/48/38/32/30/26/24/22/20/16 px). Esa dispersión es lo que hacía
     ver la página desordenada en vez de editorial.
     Además el interlineado cerrado (0.98 / leading-none) recortaba las colas de
     las letras —la "j" de Alojamientos, la "y" de "y una forma"— porque la
     máscara del revelado las cortaba por abajo.
     Aquí se define UNA escala y se aplica a todo.
     ========================================================================== */
  :root{
    --t-hero: clamp(2.7rem, 6.8vw, 5.4rem);   /* portada */
    --t-h2:   clamp(2rem, 4.4vw, 3.9rem);     /* TODOS los títulos de sección */
    --t-h3:   1.5rem;                          /* nombres de estancia, bloques */
    --t-h4:   1.15rem;                         /* subtítulos menores */
    --p-lg:   1.02rem;                         /* texto de apoyo bajo titulares */
    --p-md:   .9rem;                           /* cuerpo */
    --m-lg:   1.3rem;                          /* precios */
    --m-md:   .8rem;                           /* datos */
    --m-sm:   .68rem;                          /* antetítulos y etiquetas */
    /* Interlineado mínimo seguro para Playfair: por debajo de 1.05 se cortan
       las colas de las letras. */
    --lh-titulo: 1.08;
  }

  /* --- Titulares: una sola medida por nivel ------------------------------- */
  #inicio h1.font-display{
    font-size:var(--t-hero) !important;
    line-height:var(--lh-titulo) !important;
  }
  section h2.font-display,
  #faq h2.font-display{
    font-size:var(--t-h2) !important;
    line-height:var(--lh-titulo) !important;
  }
  .card h3,
  .exp-title,
  #modal h3,
  .marca-frase,
  footer h3{
    font-size:var(--t-h3) !important;
    line-height:1.14 !important;
  }
  /* En el mosaico solo hay DOS pesos: destacadas y normales (antes eran cuatro) */
  .exp-b-full .exp-title,
  .exp-b-wide .exp-title{ font-size:1.9rem !important; }
  .exp-b-half .exp-title,
  .exp-b-tall .exp-title{ font-size:var(--t-h3) !important; }

  /* Cifras y datos en Playfair (entorno, cómo funciona) */
  .stat-num,
  #comoFunciona .font-display,
  #naturaleza .font-display.text-4xl{ font-size:2.6rem !important; line-height:1.1 !important; }

  /* --- Texto corrido: dos medidas ----------------------------------------- */
  /* (El tamaño del párrafo de entrada lo fija .parrafo-guia al final de la
     hoja; aquí se conserva solo el ritmo vertical.) */
  section h2.font-display + p,
  section .reveal-title + p{ line-height:1.72; }
  section p:not(.eyebrow):not(.marca-lema){ font-size:var(--p-md); line-height:1.7; }

  /* --- Etiquetas monoespaciadas: una sola medida -------------------------- */
  .eyebrow{ font-size:var(--m-sm) !important; }
  .card-precio, .modal-precio{ font-size:var(--m-lg) !important; }

  /* --- LA CAUSA DEL RECORTE ----------------------------------------------
     La máscara del revelado (overflow:hidden) cortaba las colas de las letras.
     Se le da holgura por dentro sin alterar el espaciado exterior. */
  .reveal-title{
    overflow:hidden;
    padding-bottom:.22em;
    margin-bottom:-.22em;
  }
  .reveal-title > span{ padding-bottom:.02em; }

  /* Ningún titular vuelve a recortarse por interlineado */
  h1.font-display, h2.font-display, h3.font-display,
  .exp-title, .card h3{ overflow-wrap:break-word; }

  /* ==========================================================================
     CORRECCIONES VERIFICADAS EN PANTALLA
     ========================================================================== */

  /* 1. BARRA SUPERIOR ILEGIBLE
     Al bajar, la barra debía volverse crema con texto oscuro, pero la regla
     original no llegaba a aplicarse: quedaba texto crema sobre fondo crema
     (contraste 1:1, literalmente invisible). Se redeclara aquí. */
  #nav.is-solid{
    background:rgba(245,240,230,.94) !important;
    backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(74,54,40,.07);
  }
  #nav.is-solid,
  #nav.is-solid a,
  #nav.is-solid .nav-link,
  #nav.is-solid button{ color:#2C2522 !important; }
  #nav.is-solid [data-nav-border],
  #nav.is-solid [data-nav-cta]{ border-color:rgba(107,79,53,.28) !important; }
  #nav.is-solid img{ filter:none !important; }
  @media (hover:hover) and (pointer:fine){
    #nav.is-solid a:hover,
    #nav.is-solid .nav-link:hover{ color:var(--pino) !important; }
  }

  /* 2. LEYENDAS DE VIDEO CORTADAS
     Las etiquetas sobre los videos ("Alberca y jardín", "Montaje en Finca Los
     Lagos") se salían 16 px de su recuadro y se veían cortadas por abajo. */
  .relative.overflow-hidden > p.eyebrow[class*="absolute"],
  .relative.overflow-hidden > p.eyebrow{
    bottom:.9rem;
    line-height:1.5;
    max-width:calc(100% - 2.5rem);
  }

  /* ==========================================================================
     ACABADO DE PRESTIGIO
     Tres correcciones sobre lo anterior:
     1. Los botones con borde verde y letra verde se leían "verde sobre verde".
        Pasan a un filete cálido de madera con texto tinta, y se llenan de verde
        al pasar el cursor.
     2. Se devuelve el tamaño original al texto secundario: la regla que igualaba
        todos los párrafos aplanó la jerarquía que ya funcionaba.
     3. Botones y detalles con acabado más editorial: más aire, transiciones
        largas y sombras cálidas en vez de bordes duros.
     ========================================================================== */

  /* --- 1. Se retira la regla que aplanaba el texto secundario -------------- */
  section p:not(.eyebrow):not(.marca-lema){ font-size:inherit; line-height:inherit; }
  /* El tamaño del párrafo que sigue al titular lo define ahora .parrafo-guia
     (escala editorial, al final de la hoja). Aquí solo se deja la interlínea:
     fijar el font-size en este punto dejaba el párrafo de entrada MÁS chico
     que el cuerpo, que es justo lo contrario de lo que debe pasar. */
  section h2.font-display + p,
  section .reveal-title + p{ line-height:1.75; }

  /* --- 2. Botón principal: bloque sólido, sin bordes duros ----------------- */
  .eyebrow.bg-terra,
  button.js-wa.bg-terra,
  a.eyebrow.bg-terra{
    background:#1A3D2E !important;
    color:#F2EADA !important;
    border:0 !important;
    padding:1.05rem 2.3rem !important;
    letter-spacing:.2em !important;
    box-shadow:0 16px 34px -16px rgba(26,61,46,.5);
    transition:background-color .5s var(--ease-madera),
               box-shadow .5s var(--ease-madera),
               transform .5s var(--ease-madera);
  }
  @media (hover:hover) and (pointer:fine){
    .eyebrow.bg-terra:hover,
    a.eyebrow.bg-terra:hover{
      background:#14311F !important;
      transform:translateY(-2px);
      box-shadow:0 26px 50px -18px rgba(26,61,46,.55);
    }
  }

  /* --- 3. Botón secundario: se acabó el verde sobre verde ------------------ */
  .eyebrow.border-terra.text-terra,
  a.eyebrow.border-terra,
  button.eyebrow.border-terra{
    border:1px solid rgba(107,79,53,.32) !important;
    color:#2C2522 !important;
    background:transparent !important;
    padding:1.05rem 2.1rem !important;
    letter-spacing:.2em !important;
    transition:background-color .5s var(--ease-madera),
               color .5s var(--ease-madera),
               border-color .5s var(--ease-madera);
  }
  @media (hover:hover) and (pointer:fine){
    .eyebrow.border-terra.text-terra:hover,
    a.eyebrow.border-terra:hover,
    button.eyebrow.border-terra:hover{
      background:#1A3D2E !important;
      border-color:#1A3D2E !important;
      color:#F2EADA !important;
    }
  }

  /* Sobre fondos oscuros el secundario va en crema, nunca en verde */
  .bg-ink .eyebrow.border-terra,
  #experiencias .eyebrow.border-terra,
  #incluye .eyebrow.border-terra,
  #faq .eyebrow.border-terra{
    border-color:rgba(198,166,100,.45) !important;
    color:#F2EADA !important;
  }
  @media (hover:hover) and (pointer:fine){
    .bg-ink .eyebrow.border-terra:hover,
    #experiencias .eyebrow.border-terra:hover{
      background:#C6A664 !important; border-color:#C6A664 !important; color:#14311F !important;
    }
  }

  /* --- 4. Detalles de prestigio -------------------------------------------- */
  /* Filete dorado bajo el antetítulo, más fino y con más aire */
  section .eyebrow.text-terra::before{ height:1px; width:34px; opacity:.6; }
  /* Hairlines más discretas */
  .hair, .hair-b, .hair-t{ border-color:rgba(107,79,53,.15); }
  /* Foco visible y elegante para teclado */
  a:focus-visible, button:focus-visible{
    outline:1px solid #1A3D2E; outline-offset:4px;
  }

  /* El botón de Casa Acali conservaba el acento verde agua en texto Y borde,
     que es justo el "verde sobre verde" que había que quitar. Sigue el mismo
     tratamiento que el resto: filete cálido y relleno verde al pasar el cursor. */
  #casa-acali .eyebrow.border-terra,
  #casa-acali a.eyebrow.border-terra,
  #casa-acali button.eyebrow.border-terra{
    border-color:rgba(107,79,53,.32) !important;
    color:#2C2522 !important;
  }
  @media (hover:hover) and (pointer:fine){
    #casa-acali .eyebrow.border-terra:hover{
      background:#1A3D2E !important; border-color:#1A3D2E !important; color:#F2EADA !important;
    }
  }

  /* ==========================================================================
     1) ERROR DEL HERO: el contenido medía 922 px dentro de una caja de 900 y
        `overflow:hidden` lo cortaba — se veían los botones y la fila de datos
        partidos a la mitad. La portada pasa a crecer si hace falta.
     ========================================================================== */
  #inicio{ height:auto !important; min-height:100svh; }
  /* En pantallas bajas el titular se reduce para que nunca desborde */
  @media (max-height:880px){
    #inicio h1.font-display{ font-size:clamp(2.4rem,5.2vw,4rem) !important; }
  }
  @media (max-height:740px){
    #inicio h1.font-display{ font-size:clamp(2.1rem,4.4vw,3.2rem) !important; }
  }

  /* ==========================================================================
     2) MÁS MATERIA: texturas rústicas reales bajo las secciones claras.
        Se usa fotografía propia muy atenuada, no un patrón inventado.
     ========================================================================== */
  #estancias, #santiago, #comoFunciona, #testimonios{ position:relative; isolation:isolate; }
  #estancias::before, #santiago::before,
  #comoFunciona::before, #testimonios::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:url("../assets/images/glamping/glamping-vista-montana-1600.webp");
    background-size:cover; background-position:center;
    opacity:.05; filter:saturate(.5) contrast(.9);
    mix-blend-mode:multiply;
  }
  /* Velo cálido encima para que la textura no ensucie el texto */
  #estancias::after, #santiago::after,
  #comoFunciona::after, #testimonios::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(245,240,230,.55) 0%, rgba(245,240,230,.9) 55%, rgba(245,240,230,.55) 100%);
  }

  /* ==========================================================================
     3) PALABRAS DESTACADAS: el acento en cursiva se subraya con un trazo de
        pincel dorado, para que resalte contra el fondo en vez de perderse.
     ========================================================================== */
  h1 .italic, h2 .italic, h2 em, h1 em,
  .reveal-title em{
    position:relative;
    color:#235240 !important;
    font-style:italic;
  }
  h2 em::after, h1 em::after,
  h2 .italic::after, h1 .italic::after{
    content:""; position:absolute; left:0; right:0; bottom:.06em; height:.18em;
    background:linear-gradient(90deg, rgba(198,166,100,0) 0%, rgba(198,166,100,.55) 12%,
               rgba(198,166,100,.55) 88%, rgba(198,166,100,0) 100%);
    z-index:-1; border-radius:2px;
    transform:scaleX(0); transform-origin:left;
    transition:transform 1.1s var(--ease-madera) .35s;
  }
  .reveal.in h2 em::after, .reveal.in h1 em::after,
  .reveal-title.in em::after,
  .reveal.in h2 .italic::after, .reveal.in h1 .italic::after{ transform:scaleX(1); }
  /* Sobre fondos oscuros el acento va en dorado */
  .bg-ink h2 em, .bg-ink h2 .italic,
  #incluye h2 em, #faq h2 em{ color:#DCC894 !important; }

  /* ==========================================================================
     4) BOTONES RÚSTICOS Y MODERNOS: el color entra barriendo de izquierda a
        derecha, con un filete dorado que aparece al pasar el cursor.
     ========================================================================== */
  .eyebrow.bg-terra, .eyebrow.border-terra,
  a.eyebrow.bg-terra, a.eyebrow.border-terra,
  button.eyebrow.bg-terra, button.eyebrow.border-terra{
    position:relative; overflow:hidden; isolation:isolate;
  }
  .eyebrow.border-terra::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:#1A3D2E; transform:scaleX(0); transform-origin:left;
    transition:transform .6s var(--ease-madera);
  }
  .eyebrow.bg-terra::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(90deg,#14311F,#235240);
    opacity:0; transition:opacity .6s var(--ease-madera);
  }
  @media (hover:hover) and (pointer:fine){
    .eyebrow.border-terra:hover::after{ transform:scaleX(1); }
    .eyebrow.bg-terra:hover::after{ opacity:1; }
    /* filete dorado inferior que se traza */
    .eyebrow.bg-terra::before, .eyebrow.border-terra::before{
      content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
      background:#C6A664; transform:scaleX(0); transform-origin:left;
      transition:transform .6s var(--ease-madera) .1s;
    }
    .eyebrow.bg-terra:hover::before, .eyebrow.border-terra:hover::before{ transform:scaleX(1); }
  }

  /* ==========================================================================
     5) RAMITA BOTÁNICA: el mismo motivo de hoja que llevan tus letreros,
        dibujado en SVG y usado como remate del antetítulo de cada sección.
        Sustituye al filete plano anterior.
     ========================================================================== */
  section .eyebrow.text-terra::before{
    content:"";
    width:26px; height:12px; opacity:.9;
    background:currentColor;
    -webkit-mask:var(--hoja) center/contain no-repeat;
            mask:var(--hoja) center/contain no-repeat;
    transform-origin:left;
  }
  :root{
    --hoja:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 20'%3E%3Cpath d='M1 10h16' stroke='%23000' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3Cpath d='M24 10c0-4 3-7 7-7 0 4-3 7-7 7Zm0 0c0 4 3 7 7 7 0-4-3-7-7-7Z' fill='%23000'/%3E%3Cpath d='M24 10h21' stroke='%23000' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  }

  /* Remate botánico centrado entre actos, como el sello del pie */
  .acto-sep{
    display:flex; align-items:center; justify-content:center; gap:1.1rem;
    padding:3.5rem 0 0; color:rgba(107,79,53,.45);
  }
  .acto-sep::before, .acto-sep::after{
    content:""; height:1px; width:72px; background:currentColor; opacity:.5;
  }
  .acto-sep span{
    width:22px; height:22px; display:block; color:#C6A664;
    background:currentColor;
    -webkit-mask:var(--hoja-sola) center/contain no-repeat;
            mask:var(--hoja-sola) center/contain no-repeat;
  }
  :root{
    --hoja-sola:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c0 5-3.6 9-8 9 0-5 3.6-9 8-9Zm0 0c0 5 3.6 9 8 9 0-5-3.6-9-8-9Z' fill='%23000'/%3E%3Cpath d='M12 12v9' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  }

  /* ==========================================================================
     TEXTURAS REALES (assets/texturas/)
     Se usan como MATERIAL, no como paisaje: opacidad baja para que se intuyan
     sin competir con las fotos de las propiedades ni estorbar la lectura.
     Si los archivos aún no existen, no se pinta nada y todo sigue igual.
     ========================================================================== */

  /* --- Madera en las secciones de ese material --------------------------- */
  #incluye::before, #faq::before, footer.bg-ink::before{
    background-image:
      /* veta fina dibujada (queda debajo, da grano) */
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.008) 0 2px, transparent 2px 23px),
      repeating-linear-gradient(90deg,
        rgba(0,0,0,.022) 0 3px, transparent 3px 41px),
      /* tabla real */
      url("../assets/texturas/madera.webp");
    background-size:auto, auto, cover;
    background-position:center;
    background-blend-mode:normal, normal, overlay;
    opacity:1;
  }
  /* La foto de madera va contenida para que no se aclare el fondo */
  #incluye::after, #faq::after, footer.bg-ink::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg, rgba(58,43,31,.82), rgba(58,43,31,.9));
  }

  /* --- Franja de corteza entre actos -------------------------------------- */
  .franja-corteza{
    height:86px; position:relative; overflow:hidden;
    background:#3A2B1F url("../assets/texturas/corteza.webp") center/cover;
  }
  .franja-corteza::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(26,61,46,.72), rgba(58,43,31,.72));
    mix-blend-mode:multiply;
  }
  .franja-corteza::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(90deg, var(--paper,#F5F0E6) 0%, transparent 12%,
                      transparent 88%, var(--paper,#F5F0E6) 100%);
    opacity:.0;
  }
  @media (max-width:640px){ .franja-corteza{ height:56px; } }

  /* --- Sendero detrás del sello de marca ---------------------------------- */
  .marca-sello{ position:relative; isolation:isolate; }
  .marca-sello::before{
    content:""; position:absolute; inset:-1px 0 0; z-index:-1; pointer-events:none;
    background:url("../assets/texturas/sendero.webp") center/cover;
    opacity:.22; filter:saturate(.7);
  }
  .marca-sello::after{
    content:""; position:absolute; inset:-1px 0 0; z-index:-1; pointer-events:none;
    background:radial-gradient(70% 120% at 50% 50%, rgba(58,43,31,.55) 0%, rgba(58,43,31,.92) 100%);
  }

  /* El sendero detrás del sello dibujaba un rectángulo de bordes duros.
     Se difumina hacia los lados y se remata con un filete dorado para que
     se lea como una placa, no como un parche. */
  .marca-sello::before{
    -webkit-mask:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    opacity:.18;
  }
  .marca-sello::after{
    background:radial-gradient(80% 130% at 50% 50%, rgba(58,43,31,.35) 0%, rgba(58,43,31,.86) 100%);
    -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  /* ==========================================================================
     CORRECCIONES DE ESTA RONDA
     ========================================================================== */

  /* 1. EL ACENTO DEL HERO ERA INVISIBLE
        Una regla anterior pintaba toda cursiva de verde oscuro; sobre el video
        oscuro de la portada quedaba negro sobre negro. Ahí va en dorado claro. */
  #inicio h1 .italic,
  #inicio h1 em{
    color:#E4D3A2 !important;
    text-shadow:0 2px 24px rgba(0,0,0,.5);
  }
  #inicio h1 .italic::after,
  #inicio h1 em::after{
    background:linear-gradient(90deg, rgba(228,211,162,0) 0%, rgba(228,211,162,.4) 12%,
               rgba(228,211,162,.4) 88%, rgba(228,211,162,0) 100%);
  }

  /* 2. LETRAS PEQUEÑAS EN LA TIPOGRAFÍA CUADRADA (Space Mono)
        Todos los datos, etiquetas y detalles vuelven a la mono, que es la que
        da el carácter de "ficha técnica" de la marca. */
  .card-specs, .card-specs *,
  .card .font-mono, .card-precio,
  #modal .amenity, #modal .exp-chip,
  .exp-num, .marca-lema,
  section .text-inksoft.text-sm,
  .stat-num + .eyebrow{
    font-family:"Space Mono", monospace !important;
  }
  .card .font-mono, .card-specs{ letter-spacing:.02em; }

  /* 3. MENOS ESPACIO VACÍO
        El aire de 8.5rem entre secciones dejaba huecos enormes, sobre todo al
        filtrar (quedaba media pantalla en blanco antes de las estancias). */
  @media (min-width:1280px){
    section:not(#inicio) > .max-w-\[1400px\]:not(.hero-text){
      padding-top:5.5rem !important; padding-bottom:5.5rem !important;
    }
  }
  #estancias .grid{ margin-top:1.5rem; }
  #estancias > div > .flex.flex-wrap,
  #estancias .filter-btn{ margin-bottom:.25rem; }
  /* Al filtrar, las tarjetas ocultas no dejan hueco */
  .card.is-filtered-out{ display:none !important; }

  /* 4. LA FRANJA DE CORTEZA SE VEÍA COMO UN ÁRBOL
        Se amplía la textura para que se lea como materia, no como una foto
        de un tronco recortado. */
  .franja-corteza{
    background-size:auto 340%;
    background-position:center 30%;
  }
  .franja-corteza::after{
    background:linear-gradient(180deg,
      var(--paper,#F5F0E6) 0%, rgba(58,43,31,.86) 22%,
      rgba(58,43,31,.86) 78%, var(--paper,#F5F0E6) 100%);
    mix-blend-mode:normal;
  }

/* ==================================================================
   BARRA DE RESERVA
   Vive dentro de la portada y se vuelve a pegar al borde inferior
   cuando la portada sale de pantalla. La idea es que reservar y pagar
   nunca esté a más de un clic, sin tener que buscar un botón.
   ================================================================== */
.barra-reserva{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr .8fr auto;
  gap:0;
  align-items:stretch;
  background:rgba(247,243,235,.94);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(198,166,100,.5);
  border-radius:2px;
  box-shadow:0 18px 50px -18px rgba(26,61,46,.55);
  overflow:hidden;
}
.br-campo{
  display:flex; flex-direction:column; justify-content:center;
  gap:.25rem;
  padding:.8rem 1.1rem;
  border-right:1px solid rgba(58,43,31,.14);
  min-width:0;
  cursor:pointer;
  transition:background .3s var(--ease-madera);
}
.br-campo:hover{ background:rgba(198,166,100,.09); }
.br-campo:focus-within{ background:rgba(198,166,100,.14); }
.br-etq{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#6B5A48;
}
.barra-reserva select,
.barra-reserva input{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.86rem; color:var(--madera-hondo,#3A2B1F);
  background:transparent; border:0; padding:0; width:100%;
  min-width:0; appearance:none; -webkit-appearance:none;
  cursor:pointer;
}
.barra-reserva select:focus,
.barra-reserva input:focus{ outline:none; }
.barra-reserva input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(.35) sepia(.6) saturate(.6); cursor:pointer;
}
.br-estancia select{
  background-image:linear-gradient(45deg,transparent 50%,#6B5A48 50%),
                   linear-gradient(135deg,#6B5A48 50%,transparent 50%);
  background-position:calc(100% - 9px) center, calc(100% - 4px) center;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:1.3rem;
}
.br-go{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:#F7F3EB;
  background:var(--madera-hondo,#3A2B1F);
  border:0; padding:0 2rem; cursor:pointer;
  position:relative; overflow:hidden;
  transition:background .45s var(--ease-madera), letter-spacing .45s var(--ease-madera);
}
.br-go::after{                       /* barrido dorado al pasar el cursor */
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(198,166,100,.45) 50%,transparent 80%);
  transform:translateX(-110%);
  transition:transform .7s var(--ease-madera);
}
.br-go:hover{ background:#2A1F16; letter-spacing:.22em; }
.br-go:hover::after{ transform:translateX(110%); }

/* Copia pegada al borde: oculta mientras se ve la portada */
.barra-fija{
  position:fixed; left:50%; bottom:0; z-index:60;
  width:min(1400px,calc(100% - 2rem));
  transform:translate(-50%,120%);
  margin-bottom:1rem;
  transition:transform .6s var(--ease-madera), opacity .4s ease;
  opacity:0; pointer-events:none;
}
.barra-fija.esta-visible{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }

/* ---- Teléfono: dos filas y botón a todo lo ancho ---- */
@media (max-width:860px){
  .barra-reserva{ grid-template-columns:1fr 1fr; }
  .br-estancia{ grid-column:1 / -1; border-bottom:1px solid rgba(58,43,31,.14); }
  .br-campo{ padding:.65rem .85rem; }
  .br-personas{ border-right:0; }
  .br-go{
    grid-column:1 / -1; padding:.95rem 1rem;
    border-top:1px solid rgba(58,43,31,.14);
  }
  .barra-fija{ width:calc(100% - 1rem); margin-bottom:.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .barra-fija{ transition:none; }
  .br-go::after{ display:none; }
}

/* ==================================================================
   CAPA DE LUJO  ·  pase estético final
   Tres decisiones, aplicadas sin excepciones:
     1. UN SOLO ACENTO. El dorado manda. El pino es suelo, no acento;
        la madera es textura, nunca color de relleno.
     2. JERARQUÍA DURA. Los títulos mandan mucho, el cuerpo susurra.
        Nada intermedio: lo intermedio es lo que se veía "de plantilla".
     3. LA FOTO PESA. El aire va dentro de la imagen, no al lado.
   ================================================================== */
:root{
  --oro:        #C6A664;   /* acento único, sobre fondos oscuros */
  --oro-hondo:  #7A5D2C;   /* el mismo acento, legible sobre crema: 5.39:1 y 4.99:1
                              sobre el crema secundario. Medido, no estimado. */
  --oro-claro:  #E4D3A2;   /* brillos y filetes finos */
  --crema:      #F5F0E6;
  --crema-2:    #EFE7D9;
  --tinta:      #2C2522;
  --tinta-suave:#6A5E54;
  --ease-lujo:  cubic-bezier(.19,1,.22,1);   /* salida muy larga, tipo cortina */
}

/* ---------- 1 · TIPOGRAFÍA ---------------------------------------- */
/* El display se cierra y se agranda; el cuerpo se relaja y se acorta. */
.font-display{
  letter-spacing:-.018em;
  font-feature-settings:"liga" 1,"kern" 1;
}
section h2.font-display{ letter-spacing:-.022em; }

/* Antetítulos: más pequeños, más abiertos, siempre en el acento. */
.eyebrow{
  font-size:.6rem;
  letter-spacing:.28em;
}
/* Solo se tiñen los antetítulos que NO traen ya un color propio ni son
   botones: si no, el dorado pisaría la letra de los botones crema y
   quedarían ilegibles. */
.eyebrow:not([class*="text-"]):not([class*="bg-"]){ color:var(--oro-hondo); }
.bg-ink .eyebrow:not([class*="text-"]):not([class*="bg-"]),
section.bg-ink .eyebrow:not([class*="text-"]):not([class*="bg-"]),
footer .eyebrow:not([class*="text-"]):not([class*="bg-"]){ color:var(--oro); }
/* los que van sobre foto conservan su color claro original */
/* Los antetítulos de la portada van en crema sobre el video — salvo los
   botones, que traen su propio fondo y su propio color de letra. */
#inicio .eyebrow:not([class*="bg-"]):not([class*="border"]){ color:rgba(245,240,230,.82); }
#inicio .marca-lema{ color:rgba(228,211,162,.9); }

/* Medida de lectura: ningún párrafo pasa de ~62 caracteres. */
section p:not(.eyebrow):not(.font-mono){ max-width:62ch; }

/* Cuerpo un punto más cálido y aireado */
body{ color:var(--tinta); }
.text-inksoft{ color:var(--tinta-suave) !important; }

/* ---------- 2 · ÍNDICE EDITORIAL DE SECCIÓN ----------------------- */
/* Un número en mono dorado antes del título. Es el gesto que más
   separa una página de hotel de una plantilla: da orden y jerarquía. */
.indice-seccion{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:1.1rem;
}
.indice-seccion .num{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.2em;
  color:var(--oro-hondo);
}
.indice-seccion .filete{
  flex:1; height:1px; max-width:6rem;
  background:linear-gradient(90deg,var(--oro-hondo),transparent);
  opacity:.55;
}
.bg-ink .indice-seccion .num, .text-paper .indice-seccion .num{ color:var(--oro); }
.bg-ink .indice-seccion .filete, .text-paper .indice-seccion .filete{
  background:linear-gradient(90deg,var(--oro),transparent); opacity:.6;
}

/* ---------- 3 · FONDOS ------------------------------------------- */
/* Las secciones oscuras dejan de ser un rectángulo café: pino hondo
   con un filete de latón arriba y abajo, como una placa. */
section.bg-ink, footer.bg-ink{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198,166,100,.07), transparent 60%),
    #16332680;
  background-color:#163326;
  position:relative;
}
section.bg-ink::before, section.bg-ink::after,
footer.bg-ink::before{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,166,100,.45),transparent);
  pointer-events:none; z-index:2;
}
section.bg-ink::before, footer.bg-ink::before{ top:0; }
section.bg-ink::after{ bottom:0; }

/* El crema secundario, apenas más cálido, para que la alternancia se note */
.bg-paper2{ background-color:#EFE7D9 !important; }

/* ---------- 4 · IMÁGENES ----------------------------------------- */
/* Entran con un zoom lento que se detiene: la cámara que se asienta. */
.reveal-img > img,
.reveal-img > video{
  transform:scale(1.07);
  transition:transform 1.6s var(--ease-lujo), opacity 1.1s ease;
}
.reveal-img.in > img,
.reveal-img.in > video{ transform:scale(1); }

/* Viñeta cálida sobre las fotos de tarjeta: da profundidad sin filtro */
.card figure::after,
.card .card-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 25%, transparent 55%, rgba(22,51,38,.3) 100%);
  opacity:.75; transition:opacity .8s var(--ease-lujo);
}
.card:hover figure::after,
.card:hover .card-media::after{ opacity:.45; }

/* ---------- 5 · TARJETAS ----------------------------------------- */
/* Filete de latón que se dibuja al pasar el cursor, en vez de sombra. */
.card{ position:relative; transition:transform .9s var(--ease-lujo); }
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid var(--oro);
  opacity:0; transform:scale(.985);
  transition:opacity .7s var(--ease-lujo), transform .7s var(--ease-lujo);
}
.card:hover{ transform:translateY(-4px); }
.card:hover::after{ opacity:.55; transform:scale(1); }
.card img{ transition:transform 1.4s var(--ease-lujo); }
.card:hover img{ transform:scale(1.045); }

/* ---------- 6 · BOTONES ------------------------------------------ */
/* Uno sólido y uno de contorno. Ambos con barrido de latón. */
.eyebrow.bg-paper, .eyebrow.bg-terra,
a.eyebrow[href^="#"], .br-go{
  position:relative; overflow:hidden;
}
.eyebrow.bg-paper::after,
.eyebrow.bg-terra::after,
a.eyebrow[href^="#"]::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 18%,rgba(198,166,100,.4) 50%,transparent 82%);
  transform:translateX(-115%);
  transition:transform .85s var(--ease-lujo);
  pointer-events:none;
}
.eyebrow.bg-paper:hover::after,
.eyebrow.bg-terra:hover::after,
a.eyebrow[href^="#"]:hover::after{ transform:translateX(115%); }

/* El sólido de marca pasa a pino hondo con letra crema y filete de oro */
.bg-terra{ background-color:#163326 !important; }
.eyebrow.bg-terra{ box-shadow:inset 0 0 0 1px rgba(198,166,100,.35); }
.text-terra{ color:var(--oro-hondo) !important; }
.border-terra{ border-color:rgba(138,107,51,.55) !important; }
footer .text-terra, .bg-ink .text-terra{ color:var(--oro) !important; }

/* La barra de progreso, en latón */
#scrollProgress{ background:linear-gradient(90deg,var(--oro-hondo),var(--oro)); }
::selection{ background:var(--oro); color:#163326; }

/* ---------- 7 · SUBRAYADO DE NAVEGACIÓN --------------------------- */
#nav a[href^="#"]{ position:relative; }
#nav a[href^="#"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--oro);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-lujo);
}
#nav a[href^="#"]:hover::after{ transform:scaleX(1); }

/* ---------- 8 · REVELADO MÁS LENTO Y MÁS CORTO -------------------- */
/* Menos desplazamiento, más tiempo: se siente caro, no brincado. */
.reveal{
  transform:translate3d(0,14px,0);
  transition:opacity 1.05s var(--ease-lujo), transform 1.05s var(--ease-lujo);
}

/* ---------- 9 · TEXTURA DE MADERA, SOLO COMO TEXTURA -------------- */
/* Nunca a pantalla completa ni como color: un velo del 10 % sobre el
   pino, para que se intuya el grano sin volverse un fondo de madera. */
section.bg-ink > .fondo-madera,
.fondo-madera{ opacity:.1 !important; mix-blend-mode:soft-light; }
.franja-corteza{ opacity:.5; filter:saturate(.75) brightness(.9); }

@media (prefers-reduced-motion:reduce){
  .reveal-img > img, .reveal-img > video{ transform:none; }
  .card:hover{ transform:none; }
  .card:hover img{ transform:none; }
  .eyebrow::after, .br-go::after{ display:none; }
}

/* El subrayado del menú se oscurece cuando la barra se vuelve crema,
   si no el latón claro se pierde sobre el fondo claro. */
#nav.is-solid a[href^="#"]::after{ background:var(--oro-hondo); }

/* ==================================================================
   SISTEMA DE MARCA  ·  verde + latón, sello Univox y texturas
   Verde = identidad (el color del logo). Latón = metal fino.
   La combinación esmeralda + oro es el binomio clásico de lujo.
   El sello y las texturas aparecen a lo largo de la página, pero
   siempre contenidos: se intuyen, no gritan.
   ================================================================== */
:root{
  --verde-marca:       #0B6B3E;   /* verde del logo, legible sobre crema (5.8:1) */
  --verde-marca-hondo: #0B5233;
  --verde-marca-claro: #7CC15A;   /* verde brillante del logo, para fondos oscuros */
}

/* ---------- SELLO DE SECCIÓN -------------------------------------- */
/* Marca de imprenta centrada entre dos filetes de latón: el gesto que
   usa un hotel para respirar entre capítulos. Reemplaza el "aire vacío"
   por una firma. */
.sello-univox{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,4vw,2.6rem);
  padding:clamp(2.4rem,6vw,4rem) 1.5rem;
  position:relative;
}
.sello-univox .filete-oro{
  flex:1; height:1px; max-width:220px;
  background:linear-gradient(90deg,transparent,var(--oro,#C6A664));
  opacity:.7;
}
.sello-univox .filete-oro:last-child{ transform:scaleX(-1); }
.sello-univox .glifo{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  flex:0 0 auto;
}
.sello-univox .glifo svg{
  width:clamp(46px,7vw,64px); height:auto;
  color:var(--verde-marca);
}
.sello-univox .glifo .marca-cap{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.58rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--verde-marca); padding-left:.42em;
}
/* Sobre fondos oscuros el verde y el oro pasan a sus tonos claros */
.bg-ink .sello-univox .glifo svg,
.sello-univox.sobre-oscuro .glifo svg{ color:var(--verde-marca-claro); }
.bg-ink .sello-univox .glifo .marca-cap,
.sello-univox.sobre-oscuro .glifo .marca-cap{ color:var(--verde-marca-claro); }
.sello-univox.sobre-oscuro .filete-oro{ opacity:.85; }

/* ---------- FRANJA DE CORTEZA con el sello encima ----------------- */
/* La corteza deja de ser una banda suelta: se oscurece a placa y lleva
   el logo centrado, como una faja de madera con la marca grabada. */
.franja-corteza{
  height:clamp(96px,13vw,150px) !important;
  display:flex; align-items:center; justify-content:center;
  opacity:1 !important; filter:none !important;
}
.franja-corteza::after{
  background:linear-gradient(180deg, rgba(11,40,28,.86), rgba(20,36,26,.9)) !important;
  mix-blend-mode:normal !important;
}
.franja-corteza::before{
  content:'' !important; position:absolute !important;
  top:0; left:0; right:0; height:1px; inset:auto 0 auto 0 !important;
  background:linear-gradient(90deg,transparent,rgba(198,166,100,.55),transparent) !important;
  opacity:1 !important; z-index:2;
}
.franja-corteza .corteza-logo{
  position:relative; z-index:3;
  height:clamp(30px,4.4vw,44px); width:auto;
  opacity:.95;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
.franja-corteza .corteza-filete{
  position:absolute; bottom:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(198,166,100,.55),transparent);
}

/* ---------- MARCA DE AGUA del logo en secciones oscuras ----------- */
/* Un logo enorme, tenuísimo, anclado a una esquina. Da profundidad de
   marca sin competir con el texto. */
.marca-agua{
  position:absolute; pointer-events:none; z-index:0;
  width:min(46%,520px); height:auto;
  opacity:.05;
  filter:grayscale(1) brightness(1.6);
  mix-blend-mode:soft-light;
}
.marca-agua.abajo-der{ right:-4%; bottom:-6%; transform:rotate(-4deg); }
.marca-agua.arriba-izq{ left:-5%; top:-4%; transform:rotate(3deg); }
/* La sección que aloja una marca de agua debe recortar su desborde, o el
   logo asomado por el borde crea scroll horizontal. */
section:has(> .marca-agua){ overflow:hidden; }

/* El menú móvil (fijo, oculto) tenía un hijo más ancho que la pantalla que
   escapaba de body{overflow-x:hidden} y creaba un scroll horizontal fantasma
   en teléfono. Se recorta en su propia caja. */
#mobileMenu{ overflow-x:hidden; }
.bg-ink > .max-w-\[1400px\]{ position:relative; z-index:1; }

/* ---------- DETALLES VERDES repartidos --------------------------- */
/* El número de sección lleva un punto verde antes del latón: la
   identidad asoma en cada capítulo sin recargar. */
.indice-seccion .num::before{
  content:''; display:inline-block; vertical-align:middle;
  width:5px; height:5px; margin-right:.6rem; margin-top:-2px;
  background:var(--verde-marca); border-radius:50%;
}
.bg-ink .indice-seccion .num::before,
.text-paper .indice-seccion .num::before{ background:var(--verde-marca-claro); }

/* La barra de progreso de lectura: de verde a latón (marca → metal) */
#scrollProgress{ background:linear-gradient(90deg,var(--verde-marca),var(--oro)) !important; }

/* Filete verde bajo el logo de la barra de navegación al volverse sólida */
#nav .brand-underline{ display:none; }

/* Las viñetas y filetes editoriales de secciones oscuras, en verde claro */
.bg-ink .indice-seccion .filete{
  background:linear-gradient(90deg,var(--verde-marca-claro),transparent) !important;
  opacity:.55;
}

/* Tarjeta: al pasar el cursor, el filete superior se pinta de verde
   (identidad) y el marco completo de latón (metal). Dos capas, un gesto. */
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg,var(--verde-marca),var(--verde-marca-claro));
  transform:scaleX(0); transform-origin:center;
  transition:transform .7s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
  pointer-events:none;
}
.card:hover::before{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  .card::before{ transition:none; }
}

/* Rejillas de tarjetas en teléfono: sin columna explícita, la pista "auto"
   no baja del ancho mínimo del contenido y la tarjeta desborda ~46px,
   creando scroll horizontal. minmax(0,1fr) permite que encoja. */
@media (max-width:639px){
  #grid.grid, #estancias .grid{ grid-template-columns:minmax(0,1fr); }
}

/* ==================================================================
   BURBUJA DE RESERVA  ·  en TODOS los tamaños
   Un círculo discreto abajo a la derecha. Al tocarlo abre una tarjeta
   CHICA a un lado que pregunta qué estancia. Nunca hay recuadros
   grandes ni fondos que tapen el diseño: la página se ve siempre.
   El formulario del hero se eliminó por completo.
   ================================================================== */
.barra-reserva, .barra-fija{ display:none !important; }   /* ya no se usan */

/* --- Círculo primario (Reservar) --- */
.fab-reserva{
  position:fixed; right:1.25rem; z-index:62;
  bottom:calc(1.25rem + 64px + env(safe-area-inset-bottom,0px));
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--madera-hondo,#3A2B1F); color:var(--oro-claro,#E4D3A2);
  border:1px solid var(--oro,#C6A664);
  box-shadow:0 16px 40px -14px rgba(26,61,46,.7);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out),
             visibility .5s, background-color .3s ease;
}
.fab-reserva.is-visible{ opacity:1; visibility:visible; transform:none; }
.fab-reserva:hover{ background:#2A1F16; }
.fab-reserva.activo{ background:#2A1F16; }
.fab-reserva svg{ width:25px; height:25px; }
/* Etiqueta "Reservar" que asoma al pasar el cursor (solo con mouse) */
.fab-reserva-tip{
  position:absolute; right:calc(100% + .6rem); white-space:nowrap;
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#F7F3EB; background:var(--madera-hondo,#3A2B1F);
  padding:.5rem .75rem; border-radius:3px;
  border:1px solid rgba(198,166,100,.4);
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .fab-reserva:hover .fab-reserva-tip{ opacity:1; transform:translateX(0); }
}
@media (max-width:640px){ .fab-reserva-tip{ display:none; } }

/* --- WhatsApp: círculo secundario, debajo del de reserva (todos los tamaños) --- */
.wa-fab{
  left:auto; right:1.25rem;
  bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));
  width:54px; height:54px; min-width:0;
  padding:0; border-radius:50%; justify-content:center; gap:0;
}
.wa-fab .wa-fab-text{ display:none; }
.wa-fab-icon{ width:24px; height:24px; }

/* --- Tarjeta selectora de estancia (chica, a un lado, no tapa el diseño) --- */
#reservaPanel{
  position:fixed; z-index:63;
  right:1.25rem;
  bottom:calc(1.25rem + 64px + 58px + env(safe-area-inset-bottom,0px));
  width:min(320px, calc(100vw - 2.5rem));
  background:rgba(247,243,235,.98);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(198,166,100,.55);
  border-radius:14px;
  box-shadow:0 26px 60px -20px rgba(26,61,46,.6);
  padding:1rem 1rem 1.1rem;
  transform-origin:bottom right;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.96);
  transition:opacity .35s var(--ease-lujo,cubic-bezier(.19,1,.22,1)),
             transform .35s var(--ease-lujo,cubic-bezier(.19,1,.22,1)), visibility .35s;
}
#reservaPanel.abierto{ opacity:1; visibility:visible; transform:none; }
.rp-titulo{
  font-family:'Playfair Display',serif; font-size:1.02rem; line-height:1.2;
  color:var(--madera-hondo,#3A2B1F); margin-bottom:.85rem;
  padding-bottom:.7rem; border-bottom:1px solid rgba(198,166,100,.35);
}
.rp-lista{ display:flex; flex-direction:column; gap:.15rem; }
.rp-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  width:100%; text-align:left; cursor:pointer;
  padding:.62rem .55rem; border-radius:7px;
  background:transparent; border:0;
  transition:background .25s var(--ease-out);
}
.rp-item:hover, .rp-item:focus-visible{ background:rgba(198,166,100,.14); outline:none; }
.rp-nombre{
  font-family:'Playfair Display',serif; font-size:.98rem;
  color:var(--tinta,#2C2522);
}
.rp-precio{
  font-family:'Space Mono',ui-monospace,monospace; font-size:.74rem;
  color:var(--oro-hondo,#7A5D2C); white-space:nowrap;
}
.rp-precio em{ font-style:normal; color:var(--tinta-suave,#6A5E54); opacity:.8; }

/* Capa transparente para cerrar al tocar fuera. NO oscurece nada. */
#reservaCapa{
  position:fixed; inset:0; z-index:61;
  background:transparent; opacity:0; visibility:hidden;
}
#reservaCapa.activa{ opacity:1; visibility:visible; }

@media (prefers-reduced-motion:reduce){
  .fab-reserva, #reservaPanel{ transition:none; }
}

/* ==================================================================
   PORTADA · el titular nunca se encima con el logo
   Al quitar el formulario de reserva, el bloque de texto quedaba
   centrado en toda la altura y su primera línea se metía debajo de la
   barra de navegación. Se centra en el espacio DISPONIBLE reservando
   la altura del navbar arriba.
   ================================================================== */
#inicio > .hero-text{
  min-height:100svh;
  padding-top:calc(84px + 2.5rem);   /* alto del navbar + aire */
  padding-bottom:3.5rem;
  justify-content:center;
}
@media (max-width:640px){
  #inicio > .hero-text{
    padding-top:calc(84px + 1.5rem);
    padding-bottom:2.5rem;
  }
}
/* Pantallas bajas (o teléfono en horizontal): se alinea arriba para que
   nada quede fuera de vista. */
@media (max-height:700px){
  #inicio > .hero-text{ justify-content:flex-start; padding-top:calc(84px + 1rem); }
}

/* ==================================================================
   ESCALA EDITORIAL DE LECTURA
   El cuerpo estaba en 16px/24px (ratio 1.5): correcto para una web,
   corto para una publicación. Los sitios de referencia leen a 19px con
   interlínea generosa; ahí está la diferencia entre "página" y
   "revista". Se sube el tamaño y el aire SIN cambiar la tipografía
   (Inter se queda: es la secundaria que ya estaba elegida).
   ================================================================== */
section p:not(.eyebrow):not(.font-mono):not(.marca-lema):not(.card-price){
  font-size:clamp(1rem, .96rem + .22vw, 1.09rem);   /* ~16 → 17.4px */
  line-height:1.72;
  letter-spacing:-.005em;
}

/* Párrafo de entrada: el primero después de cada titular va más grande.
   Es el gesto de revista que separa la introducción del cuerpo. */
.parrafo-guia{
  font-size:clamp(1.06rem, 1rem + .38vw, 1.24rem) !important;
  line-height:1.6 !important;
  letter-spacing:-.012em !important;
  color:var(--tinta,#2C2522);
  max-width:54ch !important;
}
.bg-ink .parrafo-guia,
.text-paper .parrafo-guia{ color:rgba(245,240,230,.92); }

/* Un poco más de aire entre el titular y el texto que lo sigue */
section h2.font-display{ margin-bottom:1.15rem; }
.parrafo-guia{ margin-bottom:1.6rem; }

/* Las listas de datos (Space Mono) también respiran un poco más */
.font-mono.text-\[\.82rem\]{ line-height:1.75; }

/* ==================================================================
   RESEÑAS DE HUÉSPEDES
   Reseñas reales de Airbnb. Se componen como citas de revista: la voz
   del huésped manda (Playfair), y los datos de respaldo —estrellas,
   nombre, fecha— van en mono, discretos. Las estrellas en latón son
   la única nota de color: son la prueba, no un adorno.
   ================================================================== */
.t-fuente{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro-hondo,#7A5D2C);
  margin-top:1rem;
}
.t-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:1.25rem;
}
.t-card{
  display:flex; flex-direction:column;
  padding:2rem 1.9rem 1.8rem;
  /* Beige cálido, nunca blanco puro: el blanco enfría la paleta. */
  background:rgba(250,246,238,.72);
  border:1px solid rgba(58,43,31,.14);
  border-radius:2px;
  position:relative;
  transition:border-color .6s var(--ease-lujo,cubic-bezier(.19,1,.22,1)),
             background .6s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
.t-card:hover{
  border-color:rgba(198,166,100,.55);
  background:rgba(252,249,243,.95);
}
.t-estrellas{
  /* Latón oscuro, no el claro: sobre crema el claro cae a 2.15:1 y las
     estrellas se pierden. Este da 5.4:1 y sigue leyéndose como oro. */
  color:var(--oro-hondo,#7A5D2C);
  font-size:.78rem; letter-spacing:.22em;
  margin-bottom:1.1rem;
}
.t-cita{
  font-family:'Playfair Display',serif;
  font-size:1.06rem; line-height:1.52;
  color:var(--tinta,#2C2522);
  margin-bottom:1.5rem;
  flex:1;
  text-wrap:pretty;
}
.t-pie{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta,#2C2522);
  padding-top:1rem;
  border-top:1px solid rgba(198,166,100,.35);
}
.t-sep, .t-lugar{ color:var(--tinta-suave,#6A5E54); }
.t-estancia{
  display:block; margin-top:.4rem;
  color:var(--oro-hondo,#7A5D2C); letter-spacing:.16em;
}
@media (max-width:640px){
  .t-card{ padding:1.6rem 1.4rem 1.4rem; }
  .t-cita{ font-size:1rem; }
}

/* ==================================================================
   DETALLE DE LUJO  ·  latón, pino y corteza
   Tomado del letrero real de Univox: panel verde profundo, filete de
   latón por dentro del borde, y madera alrededor. Ese mismo esquema
   —madera fuera, oro dentro, verde al fondo— se repite en marcos,
   botones y separadores para que todo se lea como una sola pieza.
   ================================================================== */

/* ---------- MARCO DE LÁMINA: madera afuera, latón adentro ---------- */
.marco-lujo{
  position:relative;
  padding:6px;
  background:
    linear-gradient(140deg, #4A3626 0%, #6B4F35 30%, #3A2B1F 62%, #5A422C 100%);
  box-shadow:0 26px 60px -26px rgba(20,40,30,.75);
}
.marco-lujo > img,
.marco-lujo > video,
.marco-lujo > picture{ display:block; width:100%; height:100%; object-fit:cover; }
.marco-lujo::before{                 /* filete de latón por dentro */
  content:''; position:absolute; inset:6px; z-index:2;
  border:1px solid rgba(198,166,100,.75);
  pointer-events:none;
}
.marco-lujo::after{                  /* brillo diagonal muy tenue en la madera */
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.1) 0%, transparent 35%, transparent 70%, rgba(0,0,0,.14) 100%);
}
@media (max-width:640px){ .marco-lujo{ padding:4px; } .marco-lujo::before{ inset:4px; } }

/* ---------- BOTÓN DE LÁMINA ---------- */
/* Verde profundo, doble filete de latón y barrido al pasar el cursor. */
.btn-lujo{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1.05rem 2.3rem;
  color:var(--oro-claro,#E4D3A2);
  background:linear-gradient(165deg,#1D4231 0%,#163326 55%,#12291E 100%);
  border:1px solid rgba(198,166,100,.8);
  box-shadow:inset 0 0 0 3px rgba(18,41,30,.9),
             inset 0 0 0 4px rgba(198,166,100,.42),
             0 18px 40px -20px rgba(12,30,22,.85);
  position:relative; overflow:hidden; cursor:pointer;
  transition:color .5s var(--ease-lujo), box-shadow .5s var(--ease-lujo),
             transform .5s var(--ease-lujo);
}
.btn-lujo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 22%,rgba(198,166,100,.4) 50%,transparent 78%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease-lujo);
}
.btn-lujo:hover{
  color:#F7F3EB; transform:translateY(-2px);
  box-shadow:inset 0 0 0 3px rgba(18,41,30,.9),
             inset 0 0 0 4px rgba(198,166,100,.75),
             0 24px 50px -22px rgba(12,30,22,.9);
}
.btn-lujo:hover::after{ transform:translateX(120%); }

/* Los botones existentes heredan el mismo lenguaje de bordes */
.eyebrow.bg-terra{
  border:1px solid rgba(198,166,100,.55);
  box-shadow:inset 0 0 0 3px rgba(18,41,30,.85), inset 0 0 0 4px rgba(198,166,100,.3);
}
.eyebrow.bg-paper{
  border:1px solid rgba(122,93,44,.45);
  box-shadow:inset 0 0 0 3px rgba(247,243,235,.9), inset 0 0 0 4px rgba(122,93,44,.28);
}
a.eyebrow.border-paper\/50{
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.12), inset 0 0 0 4px rgba(198,166,100,.35);
}

/* ---------- LISTAS CON FILETE DE LATÓN ---------- */
.lista-lujo li{ position:relative; }
.lista-lujo li.hair-b{ border-bottom-color:rgba(122,93,44,.28) !important; }
.lista-lujo li::before{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg,var(--oro,#C6A664),transparent);
  transition:width .7s var(--ease-lujo);
}
.lista-lujo li:hover::before{ width:100%; }

/* ---------- MOSAICO DE LAS PALOMAS ---------- */
.palomas-mosaico{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(0,auto);
  gap:1rem;
}
.palomas-mosaico figure{ position:relative; margin:0; }
.pm-grande{ grid-column:span 3; aspect-ratio:16/10; }
.pm-alta{   grid-column:span 1; grid-row:span 2; aspect-ratio:2/3; }
.pm-media{  grid-column:span 1.5; aspect-ratio:4/3; }
.pm-media:nth-of-type(3){ grid-column:span 1; }
.pm-media:nth-of-type(4){ grid-column:span 2; }

@media (max-width:860px){
  .palomas-mosaico{ grid-template-columns:repeat(2,1fr); }
  .pm-grande{ grid-column:span 2; }
  .pm-alta{ grid-column:span 1; grid-row:span 1; aspect-ratio:3/4; }
  .pm-media, .pm-media:nth-of-type(3), .pm-media:nth-of-type(4){ grid-column:span 1; aspect-ratio:1/1; }
}

/* ---------- SERVICIOS: filete vertical de latón ---------- */
.servicio-palomas{
  padding-left:1.15rem;
  border-left:1px solid rgba(198,166,100,.35);
  transition:border-color .5s var(--ease-lujo);
}
.servicio-palomas:hover{ border-left-color:var(--oro,#C6A664); }

/* ==================================================================
   HOJA DE LIBRO  ·  cambio de foto en la galería
   La foto que sale gira sobre su lomo y descubre la siguiente, como
   pasar la página de un álbum. El lomo lleva un degradado de latón:
   es el canto dorado del libro atrapando la luz al girar.
   ================================================================== */
.modal-main-wrap{ perspective:1700px; perspective-origin:50% 50%; }

.hoja-libro{
  position:absolute; inset:0; z-index:5;
  transform-style:preserve-3d;
  will-change:transform;
  pointer-events:none;
  box-shadow:0 20px 50px -22px rgba(20,40,30,.7);
  transition:transform .82s cubic-bezier(.42,.02,.18,1);
}
.hoja-cara{
  width:100%; height:100%; object-fit:cover; display:block;
  backface-visibility:hidden;
}
/* El canto dorado: una franja fina que vive en el borde del giro */
.hoja-lomo{
  position:absolute; top:0; bottom:0; width:14px; z-index:2;
  pointer-events:none;
  opacity:0; transition:opacity .3s ease;
}
.hoja-libro.girando .hoja-lomo{ opacity:1; }

.hoja-libro.hacia-izq{ transform-origin:left center; }
.hoja-libro.hacia-der{ transform-origin:right center; }
.hoja-libro.hacia-izq .hoja-lomo{
  left:0;
  background:linear-gradient(90deg, rgba(198,166,100,.95), rgba(198,166,100,0));
}
.hoja-libro.hacia-der .hoja-lomo{
  right:0;
  background:linear-gradient(270deg, rgba(198,166,100,.95), rgba(198,166,100,0));
}
/* El giro no llega a 180°: se detiene antes para que se lea el grosor
   de la hoja y no como un simple volteo plano. */
.hoja-libro.hacia-izq.girando{ transform:rotateY(-158deg); }
.hoja-libro.hacia-der.girando{ transform:rotateY(158deg); }

/* La cara se va oscureciendo conforme gira: la hoja entra en sombra. */
.hoja-libro::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,30,22,0), rgba(12,30,22,.55));
  opacity:0; transition:opacity .82s cubic-bezier(.42,.02,.18,1);
}
.hoja-libro.hacia-der::after{ background:linear-gradient(270deg, rgba(12,30,22,0), rgba(12,30,22,.55)); }
.hoja-libro.girando::after{ opacity:1; }

/* La foto nueva entra con un aliento de escala, no con un salto */
.modal-main-img{ transition:opacity .5s ease, transform .7s var(--ease-lujo,cubic-bezier(.19,1,.22,1)); }
.modal-main-img.is-swapping{ opacity:1 !important; transform:scale(1.028) !important; }

@media (prefers-reduced-motion:reduce){
  .hoja-libro{ display:none !important; }
  .modal-main-img.is-swapping{ transform:none !important; opacity:.45 !important; }
}

/* ==================================================================
   PLACA UNIVOX  ·  separador entre capítulos
   Réplica del letrero real: tablón de corteza al fondo, panel de pino
   profundo encima, doble filete de latón por dentro, montaña grabada
   y el logotipo en crema. Es el mismo objeto que ya existe en la
   carretera, traído a la página.
   ================================================================== */
.placa-univox{
  position:relative;
  padding:clamp(3rem,7vw,5.5rem) 1.25rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:#2A1F16;
  isolation:isolate;
}
.placa-univox::before{                       /* tablón de corteza */
  content:''; position:absolute; inset:0; z-index:-2;
  background:url("../assets/texturas/corteza.webp") center/cover;
  filter:saturate(.7) brightness(.55);
}
.placa-univox::after{                        /* penumbra para que el panel resalte */
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 70% 100% at 50% 50%, rgba(12,30,22,.55), rgba(20,15,10,.88));
}

.placa-panel{
  position:relative;
  padding:clamp(1.6rem,3.4vw,2.4rem) clamp(2.2rem,6vw,4.5rem);
  background:linear-gradient(168deg,#1D4231 0%,#163326 52%,#11291D 100%);
  border:1px solid rgba(198,166,100,.85);
  border-radius:3px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
  max-width:min(560px, 92vw);
}
.placa-panel::before{                        /* segundo filete, por dentro */
  content:''; position:absolute; inset:7px;
  border:1px solid rgba(198,166,100,.42);
  border-radius:2px; pointer-events:none;
}

.placa-montana{
  display:block; margin:0 auto .85rem;
  width:clamp(58px,9vw,84px); height:auto;
  color:var(--oro-claro,#E4D3A2);
  opacity:.9;
}
.placa-logo{
  display:block; margin:0 auto;
  height:clamp(30px,4.6vw,42px); width:auto;
}
.placa-regla{
  display:block; height:1px; margin:1rem auto .9rem;
  width:min(230px,70%);
  background:linear-gradient(90deg,transparent,rgba(198,166,100,.75),transparent);
}
.placa-lema{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:clamp(.54rem,1.5vw,.62rem);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--oro-claro,#E4D3A2);
  padding-left:.34em;
}
.placa-frase{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.3rem,3.2vw,1.85rem);
  line-height:1.2; color:#F2EDE1;
  margin-top:.9rem;
}
.placa-frase em{ font-style:italic; color:var(--oro-claro,#E4D3A2); }

/* Las viejas franjas de corteza sueltas ya no hacen falta: la placa las
   sustituye con el mismo material, pero con la marca puesta. */
.franja-corteza{ display:none; }

/* ==================================================================
   TITULARES A DOS COLORES  ·  como el letrero
   En el letrero real la frase va en crema y el acento en latón, sobre
   pino. Aquí se traslada así: sobre crema el titular es pino profundo
   y el acento latón; sobre pino el titular es crema y el acento latón.
   Los colores de Univox pasan a ser el titular, no un adorno.
   ================================================================== */

/* Secciones claras: titular en pino profundo */
section:not(.bg-ink):not(#inicio) h2.font-display,
section:not(.bg-ink):not(#inicio) h2.font-display > span{
  color:#163326;
}
/* El acento, en latón legible sobre crema (5.4:1 medido) */
section:not(.bg-ink):not(#inicio) h2.font-display em,
section:not(.bg-ink):not(#inicio) h2.font-display .text-terra{
  color:var(--oro-hondo,#7A5D2C) !important;
  font-style:italic;
}

/* Secciones oscuras: titular en crema, acento en latón claro */
section.bg-ink h2.font-display,
section.bg-ink h2.font-display > span{ color:#F2EDE1; }
section.bg-ink h2.font-display em,
section.bg-ink h2.font-display .text-terra{
  color:var(--oro-claro,#E4D3A2) !important;
  font-style:italic;
}

/* Los subtítulos h3 siguen el mismo esquema, más discretos */
section:not(.bg-ink):not(#inicio) h3.font-display{ color:#1D4231; }
section.bg-ink h3.font-display{ color:#F2EDE1; }

/* ---------- BOTONES: borde de madera y filete verde ---------- */
/* Todos los botones de acción comparten el canto del letrero:
   madera por fuera, latón por dentro. */
.eyebrow.bg-paper,
.eyebrow.bg-terra,
a.eyebrow[href^="#"],
.br-go, .btn-lujo{
  border-radius:2px;
}
.eyebrow.bg-paper{
  background:#F7F3EB !important;
  color:#163326 !important;
  border:1px solid rgba(107,79,53,.55) !important;
  box-shadow:inset 0 0 0 3px #F7F3EB, inset 0 0 0 4px rgba(122,93,44,.4),
             0 14px 34px -18px rgba(58,43,31,.5);
}
.eyebrow.bg-paper:hover{
  background:#163326 !important; color:#E4D3A2 !important;
  box-shadow:inset 0 0 0 3px #163326, inset 0 0 0 4px rgba(198,166,100,.55),
             0 18px 40px -18px rgba(22,51,38,.6);
}
a.eyebrow.border-paper\/50{
  border:1px solid rgba(198,166,100,.6) !important;
  color:#F2EDE1 !important;
}
a.eyebrow.border-paper\/50:hover{
  background:rgba(198,166,100,.16) !important;
  border-color:var(--oro,#C6A664) !important;
}

/* Botón de WhatsApp del pie y flotante: mismo canto */
.wa-fab, .fab-reserva{
  border:1px solid rgba(198,166,100,.75) !important;
  box-shadow:inset 0 0 0 2px rgba(18,41,30,.85), 0 16px 40px -14px rgba(12,30,22,.75) !important;
}

/* ==================================================================
   COLOR MARCADO EN TODA LA LETRA
   El verde del titular estaba en #163326: tan oscuro que se leía como
   negro. Pasa al verde del propio logotipo (#0B6B3E, medido 5.8:1
   sobre crema), que sí se lee VERDE. La tinta del cuerpo y el texto
   secundario también se tiñen de pino: ya no hay grises neutros.
   ================================================================== */
:root{
  --tinta:        #1E2B25;   /* tinta pino · 12.9:1 sobre crema */
  --tinta-suave:  #44544A;   /* verde apagado · 7.1:1 (antes 5.5, lavado) */
}
body{ color:#1E2B25; }
.text-inksoft{ color:#44544A !important; }
.text-ink{ color:#1E2B25 !important; }

/* Titulares de sección clara: el verde del logotipo, no un casi-negro */
section:not(.bg-ink):not(#inicio) h2.font-display,
section:not(.bg-ink):not(#inicio) h2.font-display > span{
  color:var(--verde-marca,#0B6B3E);
}
section:not(.bg-ink):not(#inicio) h3.font-display{ color:#0B6B3E; }

/* El acento del titular: latón fuerte, no tímido */
section:not(.bg-ink):not(#inicio) h2.font-display em,
section:not(.bg-ink):not(#inicio) h2.font-display .text-terra{
  color:#6B4F21 !important;      /* latón hondo · 7.0:1 sobre crema */
}

/* Nombres de estancia en las tarjetas, también en verde de marca */
.card .font-display{ color:var(--verde-marca,#0B6B3E); }
.t-cita{ color:#1E2B25; }

/* ==================================================================
   LETRA PEQUEÑA MÁS CUADRADA
   Space Mono en negrita y con más aire entre letras: el trazo engorda
   y la caja de cada signo se percibe cuadrada, como en la señalética.
   ================================================================== */
.eyebrow{
  font-weight:700;
  letter-spacing:.3em;
}
.font-mono,
.card-price,
.t-pie, .t-fuente,
.indice-seccion .num,
.placa-lema,
.br-etq{
  font-weight:700;
  letter-spacing:.1em;
}
.font-mono.text-\[\.82rem\]{ letter-spacing:.06em; }   /* listas largas: algo menos */
.card-price{ letter-spacing:.04em; }                    /* los precios, sin deformar */
.placa-lema{ letter-spacing:.34em; }

/* ---------- PLACA DELGADA · cambio de sección ---------------------- */
/* Franja de corteza con el logotipo centrado entre dos filetes de
   latón. Es la versión ligera de la placa: marca el corte sin frenar
   la lectura. */
.placa-delgada{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,4vw,2.4rem);
  padding:clamp(1.5rem,3.4vw,2.4rem) clamp(1.25rem,6vw,4rem);
  background:#2A1F16;
  overflow:hidden;
  isolation:isolate;
}
.placa-delgada::before{                       /* corteza */
  content:''; position:absolute; inset:0; z-index:-2;
  background:url("../assets/texturas/corteza.webp") center/cover;
  filter:saturate(.7) brightness(.5);
}
.placa-delgada::after{                        /* penumbra pareja */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(20,15,10,.9), rgba(12,30,22,.62) 50%, rgba(20,15,10,.9));
}
.pd-regla{
  flex:1; height:1px; max-width:240px;
  background:linear-gradient(90deg,transparent,rgba(198,166,100,.7));
}
.pd-regla:last-child{ transform:scaleX(-1); }
.pd-logo{
  flex:0 0 auto;
  height:clamp(22px,3.2vw,30px); width:auto;
  opacity:.95;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
/* Filetes de latón arriba y abajo, como el canto de una tabla */
.placa-delgada{
  border-top:1px solid rgba(198,166,100,.4);
  border-bottom:1px solid rgba(198,166,100,.4);
}

/* ==================================================================
   AJUSTE DE PESOS  ·  grande gruesa, pequeña ligera
   La negrita en la letra chica engordaba demasiado el trazo. Vuelve a
   peso normal: se queda cuadrada por el tracking y el monoespaciado,
   no por el grosor. Todo el peso se traslada al titular, que sí gana
   cuerpo: Playfair en 700 tiene bastones anchos y bocas redondas —
   grueso y elegante a la vez.
   ================================================================== */

/* ---------- TITULARES: gruesos, redondos, verde del logo ---------- */
h1.font-display,
h2.font-display,
h2.font-display > span,
h3.font-display,
.placa-frase,
.t-cita{
  font-weight:700;
  letter-spacing:-.028em;      /* al engordar, las letras piden juntarse */
}
h2.font-display em,
h2.font-display .text-terra,
.placa-frase em{
  font-weight:700;
  font-style:italic;
}
#inicio h1{ font-weight:700; letter-spacing:-.038em; }
/* Un pelo más de interlínea: la negrita ocupa más y necesita aire */
h2.font-display{ line-height:1.06; }

/* ---------- LETRA PEQUEÑA: ligera, cuadrada, café notable --------- */
/* Sin negrita. La sensación cuadrada viene del monoespaciado y del
   tracking abierto, que es como se compone la señalética. */
.eyebrow{
  font-weight:400;
  letter-spacing:.26em;
}
.font-mono,
.card-price,
.t-pie, .t-fuente,
.indice-seccion .num,
.br-etq{
  font-weight:400;
  letter-spacing:.11em;
}
.font-mono.text-\[\.82rem\]{ letter-spacing:.07em; }
.card-price{ letter-spacing:.04em; }

/* Color café de marca: visible sin gritar (6.6:1 sobre crema) */
.eyebrow:not([class*="text-"]):not([class*="bg-"]),
.indice-seccion .num,
.t-fuente,
.t-pie{
  color:#6B4F35;
}
.card-price{ color:#5F452E; }
.text-inksoft{ color:#5F452E !important; }   /* café medio · 7.8:1 */

/* Sobre fondos oscuros la letra chica sigue en latón claro */
.bg-ink .eyebrow:not([class*="text-"]):not([class*="bg-"]),
section.bg-ink .eyebrow:not([class*="text-"]):not([class*="bg-"]),
footer .eyebrow:not([class*="text-"]):not([class*="bg-"]),
.bg-ink .indice-seccion .num{ color:var(--oro,#C6A664); }
.placa-lema{ font-weight:400; }

/* ==================================================================
   SIN BLANCO PURO EN NINGUNA PARTE
   El blanco enfría y rompe la paleta cálida. Cualquier superficie que
   pida "papel" usa beige. Se declara al final para que gane sobre
   utilidades sueltas.
   ================================================================== */
.bg-white, [class*="bg-white"]{ background-color:#FAF6EE !important; }
input, select, textarea{ background-color:transparent; }
.ubk, .ubk-ov > div,
#modalSheet, #modalContent > div:first-child{
  background-color:#F7F3EB;
}

/* ==================================================================
   ANIMACIÓN DE LOS SEPARADORES
   La placa no aparece: se revela. La corteza entra con un desplazamiento
   lento (parallax corto), los filetes de latón se dibujan de dentro
   hacia afuera y el logotipo sube con la montaña. Es el gesto de un
   letrero que se descubre al acercarse, no un bloque que hace "pop".
   ================================================================== */

/* --- Placa completa --- */
.placa-univox .placa-panel{
  opacity:0;
  transform:translateY(22px) scale(.965);
  transition:opacity 1.1s var(--ease-lujo,cubic-bezier(.19,1,.22,1)),
             transform 1.25s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
.placa-univox.in .placa-panel{ opacity:1; transform:none; }

/* La corteza del fondo se desliza: da profundidad sin mover el panel */
.placa-univox::before{
  transform:scale(1.12) translateY(-2%);
  transition:transform 1.8s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
.placa-univox.in::before{ transform:scale(1.04) translateY(0); }

/* La montaña se dibuja sola */
.placa-montana path{
  stroke-dasharray:190;
  stroke-dashoffset:190;
  transition:stroke-dashoffset 1.6s var(--ease-lujo,cubic-bezier(.19,1,.22,1)) .35s;
}
.placa-univox.in .placa-montana path{ stroke-dashoffset:0; }

/* La regla de latón crece desde el centro */
.placa-regla{
  transform:scaleX(0);
  transition:transform 1.1s var(--ease-lujo,cubic-bezier(.19,1,.22,1)) .5s;
}
.placa-univox.in .placa-regla{ transform:scaleX(1); }

/* El filete interior se dibuja después, como el canto grabado */
.placa-panel::before{
  opacity:0;
  transition:opacity .9s ease .75s;
}
.placa-univox.in .placa-panel::before{ opacity:1; }

/* --- Franja delgada --- */
.placa-delgada .pd-logo{
  opacity:0; transform:translateY(10px);
  transition:opacity .95s var(--ease-lujo,cubic-bezier(.19,1,.22,1)) .12s,
             transform 1.05s var(--ease-lujo,cubic-bezier(.19,1,.22,1)) .12s;
}
.placa-delgada.in .pd-logo{ opacity:1; transform:none; }

.placa-delgada .pd-regla{
  transform:scaleX(0); transform-origin:right center;
  transition:transform 1.05s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
.placa-delgada .pd-regla:last-child{ transform:scaleX(0) scaleX(-1); transform-origin:right center; }
.placa-delgada.in .pd-regla{ transform:scaleX(1); }
.placa-delgada.in .pd-regla:last-child{ transform:scaleX(1) scaleX(-1); }

.placa-delgada::before{
  transform:scale(1.1);
  transition:transform 1.7s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
.placa-delgada.in::before{ transform:scale(1.02); }

/* El separador entero no debe "saltar": se le quita el reveal genérico
   para que mande esta coreografía. */
.placa-univox.reveal, .placa-delgada.reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .placa-univox .placa-panel, .placa-univox::before, .placa-montana path,
  .placa-regla, .placa-panel::before,
  .placa-delgada .pd-logo, .placa-delgada .pd-regla, .placa-delgada::before{
    transition:none !important; opacity:1 !important; transform:none !important;
    stroke-dashoffset:0 !important;
  }
}

/* ==================================================================
   BASE MÁS CÁLIDA
   El crema #F5F0E6 se leía como blanco. Baja a arena #EFE7D8: sigue
   siendo claro, pero ya tiene temperatura. Medido sobre este fondo:
   verde 5.4:1 · tinta 12.0:1 · café 6.1:1 — todo con margen.
   La banda alterna baja a #E9DFCC para que la alternancia se note.
   ================================================================== */
:root{
  --crema:   #EFE7D8;
  --crema-2: #E9DFCC;
  --paper:   #EFE7D8;
}
html{ background:#EFE7D8; }
body{ background:#EFE7D8; }
.bg-paper2{ background-color:#E9DFCC !important; }

/* La utilidad bg-paper solo se aclara cuando es un BOTÓN sobre foto;
   como superficie de sección adopta la arena. */
section.bg-paper, div.bg-paper:not(.eyebrow){ background-color:#EFE7D8 !important; }

/* Tarjetas de reseña: un velo más claro que el fondo, nunca blanco */
.t-card{ background:rgba(247,242,232,.75); }
.t-card:hover{ background:rgba(250,246,238,.95); }

/* Superficies de diálogo: papel cálido */
.ubk, #modalSheet, #modalContent > div:first-child{ background-color:#F2EBDD; }

/* Los filetes finos se recalibran al fondo nuevo para que no desaparezcan */
:root{
  --line:        rgba(30,43,37,.16);
  --line-strong: rgba(30,43,37,.3);
}

/* ==================================================================
   ESTRUCTURA DEL HERO
   Antes eran dos antetítulos apilados y márgenes sueltos (mb-4, mb-5,
   mt-5, mt-6): sin jerarquía. Ahora sigue el orden del letrero real —
   filete y sitio · titular · texto · acciones · lema — con un ritmo
   vertical de una sola escala, para que se lea como un bloque armado.
   ================================================================== */
.hero-bloque{
  --paso: clamp(1rem, 1.6vw, 1.6rem);   /* unidad única de ritmo */
  display:flex; flex-direction:column;
  align-items:flex-start;
}

/* 1 · Sitio, con filete de latón delante */
.hero-sitio{
  display:flex; align-items:center; gap:.85rem;
  color:rgba(245,240,230,.85) !important;
  margin-bottom:calc(var(--paso) * 1.15);
}
.hero-filete{
  display:block; width:clamp(28px,4vw,54px); height:1px;
  background:linear-gradient(90deg,var(--oro,#C6A664),rgba(198,166,100,.25));
  flex:0 0 auto;
}

/* 2 · Titular: manda, y por eso no lleva margen superior */
.hero-bloque h1{ margin:0; }

/* 3 · Entrada: separada por un filete de aire, no por un número al azar */
.hero-entrada{
  margin-top:calc(var(--paso) * 1.5);
  max-width:46ch;
  color:rgba(245,240,230,.88);
  font-size:clamp(1rem,.94rem + .3vw,1.12rem);
  line-height:1.68;
}

/* 4 · Acciones */
.hero-acciones{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin-top:calc(var(--paso) * 1.9);
}

/* 5 · Lema al pie, separado por una regla: cierra el bloque como en el
   letrero, donde el lema vive bajo el logotipo. */
.hero-lema{
  margin-top:calc(var(--paso) * 2.2);
  padding-top:calc(var(--paso) * 1.1);
  border-top:1px solid rgba(198,166,100,.4);
  width:100%; max-width:min(30rem, 100%);
  color:rgba(228,211,162,.9) !important;
  letter-spacing:.3em;
}

@media (max-width:640px){
  .hero-bloque{ --paso:.85rem; }
  .hero-lema{ letter-spacing:.22em; font-size:.55rem; }
}

/* ==================================================================
   ESTRUCTURA COMÚN DE SECCIÓN
   Todas las cabeceras usan el mismo ritmo, para que ninguna se sienta
   improvisada: índice · antetítulo · titular · entrada.
   ================================================================== */
.indice-seccion{ margin-bottom:.9rem; }
section h2.font-display{ margin-bottom:1.05rem; }
section h2.font-display + .parrafo-guia,
section .reveal-title + .parrafo-guia{ margin-top:0; }
.parrafo-guia{ margin-bottom:1.9rem; }

/* ==================================================================
   FICHA DE PROPIEDAD EN CRISTAL
   La ficha (nombre, precio, ubicación, datos) deja de ser una zona
   plana y pasa a ser un panel de cristal beige: translúcido, desenfocado
   y con filete de latón. Al pasar el cursor sube la opacidad y el
   filete se enciende — el mismo lenguaje del marco de las fotos.
   ================================================================== */
.card{ position:relative; }
.card .card-body{
  position:relative;
  background:linear-gradient(168deg, rgba(247,242,232,.82), rgba(233,223,204,.68));
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  border:1px solid rgba(122,93,44,.28);
  padding:1.35rem 1.4rem 1.5rem;
  transition:background .7s var(--ease-lujo,cubic-bezier(.19,1,.22,1)),
             border-color .7s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
/* La tarjeta es siempre horizontal (foto izq · ficha der), así que la
   costura va del lado izquierdo de la ficha. El marco lo lleva la
   tarjeta completa; la ficha solo aporta el filete de la unión. */
.card .card-body{ border:0; }
.card{
  border:1px solid rgba(122,93,44,.26);
  transition:border-color .7s var(--ease-lujo,cubic-bezier(.19,1,.22,1)),
             transform .9s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
.card:hover{ border-color:rgba(198,166,100,.62); }
/* Filete de latón en la unión foto/ficha. La tarjeta cambia de eje en
   640px: hasta ahí va horizontal (foto izq) y encima vertical (foto
   arriba), así que la costura cambia de lado con ella. */
.card .card-body::before{
  content:''; position:absolute; z-index:2; pointer-events:none;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(198,166,100,.8), transparent);
}
@media (max-width:640px){
  .card .card-body::before{
    top:0; left:0; bottom:0; right:auto; width:1px; height:auto;
    background:linear-gradient(180deg, transparent, rgba(198,166,100,.8), transparent);
  }
  /* En horizontal la ficha es angosta: se respeta el acolchado compacto */
  .card .card-body{ padding:.9rem 1rem; }
}
.card:hover .card-body{
  background:linear-gradient(168deg, rgba(250,246,238,.94), rgba(238,229,213,.86));
  border-color:rgba(122,93,44,.5);
}

/* La foto y la ficha forman una sola pieza */
.card figure, .card .card-media{ margin-bottom:0; }

/* En el modal, el panel de datos usa el mismo cristal */
#modalContent > div:last-child{
  background:linear-gradient(168deg, rgba(247,242,232,.9), rgba(233,223,204,.75));
  backdrop-filter:blur(12px) saturate(1.06);
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
}

/* Las tarjetas de reseña comparten el cristal, para que todo el sitio
   hable el mismo material */
.t-card{
  backdrop-filter:blur(12px) saturate(1.06);
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
  border-color:rgba(122,93,44,.26);
}
.t-card:hover{ border-color:rgba(198,166,100,.6); }

@media (prefers-reduced-motion:reduce){
  .card .card-body{ transition:none; }
}

/* ==================================================================
   REDES SOCIALES
   Círculos de latón sobre el pino del pie. El nombre aparece al pasar
   el cursor; en teléfono se muestra siempre, porque ahí no hay hover.
   ================================================================== */
.redes{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.red{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.62rem .8rem;
  border:1px solid rgba(198,166,100,.45);
  border-radius:999px;
  color:var(--oro-claro,#E4D3A2);
  background:rgba(198,166,100,.06);
  cursor:pointer;
  transition:background .45s var(--ease-lujo,cubic-bezier(.19,1,.22,1)),
             border-color .45s var(--ease-lujo,cubic-bezier(.19,1,.22,1)),
             color .35s ease, transform .45s var(--ease-lujo,cubic-bezier(.19,1,.22,1));
}
.red svg{ width:18px; height:18px; flex:0 0 auto; }
.red-nombre{
  font-family:'Space Mono',ui-monospace,monospace;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
}
.red:hover, .red:focus-visible{
  background:rgba(198,166,100,.16);
  border-color:var(--oro,#C6A664);
  color:#F7F3EB;
  transform:translateY(-2px);
  outline:none;
}
@media (max-width:520px){
  .red{ padding:.6rem .7rem; }
  .red-nombre{ font-size:.55rem; letter-spacing:.12em; }
}