html, body { background:#F6F1EA; color:#161616; }
    body { font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
    .font-serif-display { font-family:"Cormorant Garamond", Georgia, serif; font-weight:400; letter-spacing:-0.01em; }

    /* ---------- Custom cursor ---------- */
    @media (hover: hover) and (pointer: fine) {
      html, body, * { cursor: none !important; }
      .cursor-dot {
        position: fixed; top:0; left:0; width:6px; height:6px;
        background:#161616; border-radius:9999px; pointer-events:none;
        z-index: 9999; transform: translate3d(-50%, -50%, 0);
        mix-blend-mode: difference;
      }
      .cursor-ring {
        position: fixed; top:0; left:0; width:36px; height:36px;
        border:1px solid rgba(22,22,22,0.7); border-radius:9999px;
        pointer-events:none; z-index: 9998;
        transform: translate3d(-50%, -50%, 0) scale(1);
        transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .25s ease, background-color .25s ease;
      }
      .cursor-ring.is-hover {
        width: 64px; height: 64px;
        border-color: rgba(22,22,22,0.95);
        background: rgba(22,22,22,0.06);
      }
      .cursor-ring.is-dark {
        border-color: rgba(246,241,234,0.85);
      }
      .cursor-ring.is-dark.is-hover {
        background: rgba(246,241,234,0.12);
      }
      .cursor-dot.is-dark { background:#F6F1EA; }
      .cursor-ring.is-down { transform: translate3d(-50%, -50%, 0) scale(0.85); }
    }
    /* Reduced motion / touch: restore native cursor */
    @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
      .cursor-dot, .cursor-ring { display: none !important; }
    }

    /* ---------- Focus ring ---------- */
    *:focus-visible { outline: 2px solid #161616; outline-offset: 3px; border-radius: 2px; }
    .on-dark *:focus-visible { outline-color:#F6F1EA; }

    /* ---------- Skip-link ---------- */
    .skip-link {
      position:absolute; left:1rem; top:-3rem;
      background:#161616; color:#F6F1EA;
      padding:.6rem 1rem; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
      z-index:100; transition: top .2s ease;
    }
    .skip-link:focus { top:1rem; }

    /* ---------- Nav underline ---------- */
    .nav-link { position:relative; }
    .nav-link::after {
      content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
      background:currentColor; transform:scaleX(0); transform-origin:left;
      transition: transform .35s ease;
    }
    .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform:scaleX(1); }

    /* ---------- Hero image placeholder ---------- */
    .placeholder {
      background-color:#E8DDC9;
      background-image:
        repeating-linear-gradient(135deg,
          rgba(22,22,22,0.05) 0 1px,
          transparent 1px 14px);
    }
    .placeholder.is-dark {
      background-color:#3A352F;
      background-image:
        repeating-linear-gradient(135deg,
          rgba(246,241,234,0.06) 0 1px,
          transparent 1px 14px);
    }
    .placeholder-tag {
      font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px; letter-spacing:.16em; text-transform:uppercase;
    }

    /* ---------- Reveal on scroll (fade-up / stagger) ---------- */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

    .fade-up {
      opacity: 0; transform: translateY(28px);
      transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
      transition-delay: var(--reveal-delay, 0s);
      will-change: opacity, transform;
    }
    .fade-up.is-in { opacity: 1; transform: translateY(0); }

    .stagger > * {
      opacity: 0; transform: translateY(28px);
      transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    }
    .stagger.is-in > *:nth-child(1)  { transition-delay: .05s; }
    .stagger.is-in > *:nth-child(2)  { transition-delay: .15s; }
    .stagger.is-in > *:nth-child(3)  { transition-delay: .25s; }
    .stagger.is-in > *:nth-child(4)  { transition-delay: .35s; }
    .stagger.is-in > *:nth-child(5)  { transition-delay: .45s; }
    .stagger.is-in > *:nth-child(6)  { transition-delay: .55s; }
    .stagger.is-in > *:nth-child(7)  { transition-delay: .65s; }
    .stagger.is-in > *:nth-child(8)  { transition-delay: .75s; }
    .stagger.is-in > *:nth-child(9)  { transition-delay: .85s; }
    .stagger.is-in > *:nth-child(10) { transition-delay: .95s; }
    .stagger.is-in > * { opacity: 1; transform: translateY(0); }

    .delay-1 { --reveal-delay: .10s; }
    .delay-2 { --reveal-delay: .20s; }
    .delay-3 { --reveal-delay: .30s; }
    .delay-4 { --reveal-delay: .40s; }
    .delay-5 { --reveal-delay: .50s; }
    .delay-6 { --reveal-delay: .60s; }

    @media (prefers-reduced-motion: reduce) {
      .fade-up, .stagger > * { opacity: 1; transform: none; transition: none; }
      .nav-link::after { transition: none; }
    }

    /* ---------- Hero slow zoom ---------- */
    @keyframes heroZoom { from { transform: scale(1.0); } to { transform: scale(1.07); } }
    .hero-zoom > img, .hero-zoom > video { animation: heroZoom 18s ease-out forwards; }
    @media (prefers-reduced-motion: reduce) {
      .hero-zoom > img, .hero-zoom > video { animation: none; }
    }

    /* ---------- Float card on hover ---------- */
    .float-card {
      transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
      will-change: transform;
    }
    .float-card:hover { transform: translateY(-3px); }
    .float-card.float-shadow:hover { box-shadow: 0 30px 60px -25px rgba(22,22,22,0.30); }
    .on-dark .float-card.float-shadow:hover { box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55); }

    /* ---------- Buttons · liquid fill ---------- */
    .btn-primary {
      position: relative; overflow: hidden;
      background-image: linear-gradient(to right, #F6F1EA 50%, #161616 50%);
      background-size: 220% 100%;
      background-position: 100% 0;
      transition: background-position .65s cubic-bezier(.2,.7,.2,1), color .35s ease, transform .25s ease;
    }
    .btn-primary:hover {
      background-position: 0% 0;
      color: #161616;
    }
    .btn-primary:active { transform: translateY(1px); }
    .btn-primary svg, .btn-ghost svg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
    .btn-primary:hover svg, .btn-ghost:hover svg { transform: translateX(4px); }

    .btn-ghost {
      position: relative; overflow: hidden;
      background-image: linear-gradient(to right, #161616 50%, transparent 50%);
      background-size: 220% 100%;
      background-position: 100% 0;
      transition: background-position .65s cubic-bezier(.2,.7,.2,1), color .35s ease, border-color .35s ease;
    }
    .btn-ghost:hover {
      background-position: 0% 0;
      color: #F6F1EA;
    }
    .on-dark .btn-ghost {
      background-image: linear-gradient(to right, #F6F1EA 50%, transparent 50%);
    }
    .on-dark .btn-ghost:hover { color: #161616; }

    /* ---------- Route cross-fade overlay ---------- */
    .route-overlay {
      position: fixed; inset: 0; z-index: 60;
      background: #F6F1EA;
      opacity: 0; pointer-events: none;
      transition: opacity .32s cubic-bezier(.2,.7,.2,1);
    }
    .route-overlay.is-on { opacity: 1; pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) {
      .route-overlay { transition: opacity .15s ease; }
    }

    .v-rl { writing-mode: vertical-rl; transform: rotate(180deg); }

    /* ---------- Form field · animated underline on focus ---------- */
    .field {
      position: relative;
      border-bottom: 1px solid #D8CFC2;
      transition: border-color .25s ease;
    }
    .field::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
      height: 1px; background: #161616;
      transform: scaleX(0); transform-origin: left;
      transition: transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .field:focus-within::after { transform: scaleX(1); }
    .field:hover { border-bottom-color: #6B5F54; }

    /* ---------- WhatsApp FAB ---------- */
    @keyframes waPulse {
      0%   { box-shadow: 0 0 0 0   rgba(31,143,78,0.55), 0 18px 40px -12px rgba(22,22,22,0.45); }
      70%  { box-shadow: 0 0 0 22px rgba(31,143,78,0),    0 18px 40px -12px rgba(22,22,22,0.45); }
      100% { box-shadow: 0 0 0 0   rgba(31,143,78,0),    0 18px 40px -12px rgba(22,22,22,0.45); }
    }
    .wa-fab {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
      width: 64px; height: 64px; border-radius: 9999px;
      display: inline-flex; align-items:center; justify-content:center;
      background: rgba(31,143,78,0.85);
      -webkit-backdrop-filter: blur(14px) saturate(140%);
              backdrop-filter: blur(14px) saturate(140%);
      border: 1px solid rgba(255,255,255,0.35);
      color: #fff;
      animation: waPulse 2.4s cubic-bezier(.2,.7,.2,1) infinite;
      transition: transform .3s ease, background-color .3s ease;
    }
    .wa-fab:hover { transform: scale(1.06); background: rgba(31,143,78,1); }
    .wa-fab:active { transform: scale(0.98); }
    .wa-fab .wa-tip {
      position: absolute; right: calc(100% + 14px); top:50%;
      transform: translateY(-50%) translateX(8px);
      background: #161616; color:#F6F1EA;
      font-family: Inter, sans-serif; font-size: 12px; font-weight: 500;
      letter-spacing: .04em; white-space: nowrap;
      padding: 10px 14px; border-radius: 6px;
      opacity: 0; pointer-events: none;
      transition: opacity .25s ease, transform .25s ease;
      box-shadow: 0 20px 40px -15px rgba(0,0,0,0.4);
    }
    .wa-fab .wa-tip::after {
      content:""; position:absolute; left: 100%; top:50%;
      width:0; height:0; border:6px solid transparent; border-left-color:#161616;
      transform: translateY(-50%);
    }
    .wa-fab:hover .wa-tip, .wa-fab:focus-visible .wa-tip {
      opacity: 1; transform: translateY(-50%) translateX(0);
    }
    @media (max-width: 640px) {
      .wa-fab { width: 58px; height: 58px; bottom: 1rem; right: 1rem; }
      .wa-fab .wa-tip { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wa-fab { animation: none; }
    }

    /* ---------- Chat widget ---------- */
    .chat-fab {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
      width: 60px; height: 60px; border-radius: 9999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #161616; color: #F6F1EA; border: none;
      box-shadow: 0 20px 50px -15px rgba(22,22,22,0.55);
      transition: transform .3s ease, background-color .3s ease;
      animation: chatPulse 2.8s ease-in-out infinite;
    }
    .chat-fab::after {
      content: ""; position: absolute; top: 6px; right: 6px;
      width: 10px; height: 10px; border-radius: 9999px;
      background: #C9A87C;
      box-shadow: 0 0 0 2px #161616;
    }
    .chat-fab.is-open::after { display: none; }
    .chat-fab:hover { transform: translateY(-2px) scale(1.04); background: #2A2724; }
    .chat-fab:active { transform: scale(0.96); }
    @keyframes chatPulse {
      0%, 100% { box-shadow: 0 0 0 0   rgba(201,168,124,0),   0 20px 50px -15px rgba(22,22,22,0.55); }
      50%      { box-shadow: 0 0 0 14px rgba(201,168,124,0.10), 0 20px 50px -15px rgba(22,22,22,0.55); }
    }
    @media (prefers-reduced-motion: reduce) { .chat-fab { animation: none; } }

    .chat-panel {
      position: fixed; bottom: 100px; right: 1.5rem; z-index: 49;
      width: 360px; max-width: calc(100vw - 2rem);
      height: min(560px, calc(100vh - 130px));
      background: #F6F1EA;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 40px 80px -20px rgba(22,22,22,0.45), 0 0 0 1px rgba(22,22,22,0.06);
      transform: translateY(20px) scale(0.92);
      opacity: 0; pointer-events: none;
      transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
      display: flex; flex-direction: column;
    }
    .chat-panel.is-open {
      transform: translateY(0) scale(1);
      opacity: 1; pointer-events: auto;
    }

    /* Floating "¡Hablemos!" tip when closed */
    @keyframes tipBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    .chat-tip {
      position: fixed; bottom: 32px; right: 100px;
      z-index: 49;
      background: #161616; color: #F6F1EA;
      font-family: Inter, sans-serif; font-weight: 500;
      font-size: 12px; letter-spacing: .04em;
      padding: 9px 14px; border-radius: 9999px;
      box-shadow: 0 18px 40px -15px rgba(0,0,0,0.5);
      animation: tipBob 2.6s ease-in-out infinite;
      pointer-events: none;
      white-space: nowrap;
    }
    .chat-tip::after {
      content:""; position:absolute; left:100%; top:50%;
      width:0; height:0; border:6px solid transparent; border-left-color:#161616;
      transform: translateY(-50%);
    }
    @media (max-width: 640px) {
      .chat-tip { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .chat-tip { animation: none; }
    }
    @media (max-width: 640px) {
      .chat-fab { width: 56px; height: 56px; bottom: 1rem; right: 1rem; }
      .chat-panel {
        right: 1rem; left: 1rem; bottom: 84px;
        width: auto; max-width: none;
        height: min(540px, calc(100vh - 110px));
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .chat-panel { transition: opacity .2s ease; }
    }
    .chat-panel form input:focus-visible { outline: none; }
    .chat-panel form { border-top: 1px solid #D8CFC2; }

    /* ---------- Sticky CTA (Promo landing only) ---------- */
    .sticky-cta {
      position: fixed; left: 12px; right: 12px; bottom: 12px;
      z-index: 45;
      background: #161616; color: #F6F1EA;
      border-radius: 9999px;
      padding: 16px 20px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
      box-shadow: 0 24px 60px -15px rgba(0,0,0,0.55);
      font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
      transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
    }
    .sticky-cta:hover { background: #2A2724; }
    .sticky-cta.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
    @media (min-width: 768px) {
      .sticky-cta {
        left: 50%; right: auto; transform: translateX(-50%);
        padding: 18px 30px; font-size: 12px; bottom: 20px;
      }
      .sticky-cta.is-hidden { transform: translateX(-50%) translateY(140%); }
    }

    /* ---------- Media cards (galería Reels) ---------- */
    .media-card {
      position: relative; overflow: hidden; border-radius: 18px;
      background: #E8DDC9;
    }
    .media-card.is-dark { background:#2A2724; }
    .media-card img, .media-card video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .9s cubic-bezier(.2,.7,.2,1);
    }
    .media-card:hover img, .media-card:hover video { transform: scale(1.06); }
    .media-card::after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 50%);
      opacity: .35; transition: opacity .4s ease;
    }
    .media-card:hover::after { opacity: .55; }

    /* Promo hero radial vignette */
    .promo-vignette::before {
      content:""; position:absolute; inset:0; pointer-events:none;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);
    }

    /* Soft pulse for promo CTA */
    @keyframes softPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(246,241,234,0.0), 0 20px 40px -12px rgba(0,0,0,0.5); }
      50%      { box-shadow: 0 0 0 16px rgba(246,241,234,0.05), 0 20px 40px -12px rgba(0,0,0,0.5); }
    }
    .pulse-cta { animation: softPulse 2.6s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .pulse-cta { animation: none; } }