/* ══════════════════════════════════════════════════════════
       THEME TOKENS (light mode only)
    ══════════════════════════════════════════════════════════ */

    :root {
      --bg-hero      : #F5EFE0;
      --bg-band      : #EAE0C8;
      --bg-dark      : #EDE4CF;
      --bg-cream     : #FFFFFF;
      --bg-cream-2   : #F0EBD8;
      --bg-footer    : #EAE0C8;

      --text-on-dark  : #0D0B07;
      --text-dim      : #3A3320;
      --text-muted    : #6B5F40;
      --text-faint    : #4A3C20;

      --text-on-cream : #0D0B07;
      --text-on-cream-2: #3A3320;
      --text-on-cream-3: #5A4E35;

      --proc-border   : rgba(0,0,0,0.08);
      --proc-name     : #0D0B07;
      --proc-desc     : #6B5F40;
      --proc-num-col  : rgba(184,134,11,0.2);

      --nav-scrolled  : rgba(245,239,224,0.95);
      --nav-border    : rgba(184,134,11,0.2);

      --footer-text   : #6B5F40;
      --footer-sep    : rgba(184,134,11,0.15);

      /* Grid lines */
      --grid-opacity  : 0.4;

      --gold : #B8860B;
      --gold-light: #D4AF37;
      --gold-pale: #EDD07A;
    }

    /* ══════════════════════════════════════════════════════════
       RESET & BASE
    ══════════════════════════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Montserrat', sans-serif;
      background: var(--bg-hero);
      color: var(--text-on-dark);
      overflow-x: hidden;
      transition: background 0.45s, color 0.45s;
    }

    /* Smooth section transitions */
    section, footer, .intro-band {
      transition: background 0.45s, background-color 0.45s, color 0.45s;
    }

    /* ══════════════════════════════════════════════════════════
       LOGO SYSTEM — inline SVG, transparent bg
    ══════════════════════════════════════════════════════════ */
    .logo-svg { display: block; }

    /* ══════════════════════════════════════════════════════════
       NAV
    ══════════════════════════════════════════════════════════ */
    nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 200;
      padding: 1.1rem 5vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* Always a soft dark glass — sits cleanly over the hero photo */
      background: rgba(4,3,2,0.26);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(184,134,11,0.12);
      transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
    }
    /* When scrolled past hero — full opaque theme bg */
    nav.scrolled {
      background: var(--nav-scrolled);
      border-bottom: 1px solid var(--nav-border);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .nav-brand { text-decoration: none; display: flex; align-items: center; }
    .nav-logo-svg { height: 52px; width: auto; display: block; overflow: visible; }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 2.5rem;
    }
    .nav-links {
      display: flex;
      gap: 2.4rem;
      list-style: none;
    }
    /* Cream/light text — always legible over the dark-glass nav */
    .nav-links a {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(230,218,190,0.78);
      text-decoration: none;
      transition: color 0.3s;
    }
    .nav-links a:hover { color: var(--gold-light); }
    /* When scrolled: restore theme-appropriate text colour */
    nav.scrolled .nav-links a  { color: var(--text-dim); }
    nav.scrolled .nav-links a:hover { color: var(--gold-light); }


    /* ══════════════════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════════════════ */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      overflow: hidden;
      background:
        linear-gradient(
          to bottom,
          rgba(4,3,2,0.28) 0%,   /* light at top — let the sky breathe */
          rgba(4,3,2,0.38) 30%,
          rgba(4,3,2,0.52) 58%,  /* main content zone */
          rgba(4,3,2,0.74) 100%  /* bottom tags — strong contrast */
        ),
        url('../assets/malaga-hero.jpg') center 40% / cover no-repeat;
    }

    /* Hero text — cream/gold, always legible over the dark overlay */
    .hero .hero-overline span   { color: var(--gold-light); text-shadow: 0 0 24px rgba(4,3,2,0.9); }
    .hero .hero-overline-line   { background: var(--gold-light); }
    .hero .hero-sub1            { color: var(--gold-light); text-shadow: 0 0 30px rgba(4,3,2,0.9), 0 2px 8px rgba(4,3,2,0.7); }
    .hero .hero-logo-wrap       { filter: drop-shadow(0 2px 22px rgba(4,3,2,0.88)); }
    .hero .hero-tag-item        { color: rgba(240,233,212,0.92); text-shadow: 0 1px 18px rgba(4,3,2,0.9), 0 0 40px rgba(4,3,2,0.7); }
    .hero .hero-tag-sep         { background: rgba(212,175,55,0.55); }
    .hero .hero-scroll span     { color: rgba(200,191,168,0.7); text-shadow: 0 0 12px rgba(4,3,2,0.8); }
    .hero .orn-line             { background: linear-gradient(to right, transparent, var(--gold-light)); opacity: 0.55; }
    .hero .orn-line.r           { background: linear-gradient(to left, transparent, var(--gold-light)); }
    .hero .orn-diamond          { background: var(--gold-light); }
    .hero .orn-dot              { background: var(--gold-pale); }

    /* Fine decorative grid */
    .hero-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: var(--grid-opacity);
      transition: opacity 0.45s;
    }

    /* Watermark S */
    .hero-wm {
      position: absolute;
      right: -4%;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      user-select: none;
      opacity: 0.07;
      transition: opacity 0.45s;
    }

    /* Hero main content */
    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: clamp(8rem, 16vh, 12rem) 2rem 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hero-overline {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      margin-bottom: 2rem;
    }
    .hero-overline-line { width: 2.4rem; height: 1px; background: var(--gold); opacity: 0.55; }
    .hero-overline span {
      font-size: 0.64rem;
      font-weight: 500;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--gold);
    }

    /* Hero logo — just the full Sanchamar SVG */
    .hero-logo-wrap {
      margin-bottom: 1.4rem;
    }
    .hero-full-svg { height: clamp(80px, 12vw, 130px); width: auto; display: block; }

    /* Subtitle 1 — bigger, close to logo size */
    .hero-sub1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.05rem, 2vw, 1.55rem);
      font-weight: 400;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.8rem;
    }

    /* Ornament */
    .hero-orn {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-bottom: 0;
    }
    .orn-line { width: 65px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); opacity: 0.6; }
    .orn-line.r { background: linear-gradient(to left, transparent, var(--gold)); }
    .orn-diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }
    .orn-dot { width: 3px; height: 3px; background: var(--gold-light); border-radius: 50%; }

    /* Service tags — much larger */
    .hero-tags { display: flex; align-items: center; gap: 2rem; margin-top: 2.4rem; }
    .hero-tag-item {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.15rem, 2.1vw, 1.7rem);
      font-weight: 300;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-dim);
    }
    .hero-tag-sep { width: 1px; height: 28px; background: var(--gold); opacity: 0.35; }

    /* Scroll cue */
    .hero-scroll {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      animation: scrollBob 2.2s ease-in-out infinite;
    }
    .hero-scroll span {
      font-size: 0.58rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    @keyframes scrollBob {
      0%,100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
      50%      { opacity: 0.85; transform: translateX(-50%) translateY(7px); }
    }

    /* ══════════════════════════════════════════════════════════
       INTRO BAND
    ══════════════════════════════════════════════════════════ */
    .intro-band {
      background: var(--bg-band);
      border-top: 1px solid rgba(184,134,11,0.14);
      border-bottom: 1px solid rgba(184,134,11,0.14);
      padding: 3.2rem 5vw;
      display: flex;
      align-items: center;
      gap: 5vw;
    }
    .intro-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.4rem, 2.7vw, 2.1rem);
      font-weight: 300;
      font-style: italic;
      color: var(--text-on-dark);
      line-height: 1.55;
      flex: 1;
    }
    .intro-quote em { color: var(--gold-light); font-style: normal; }
    .band-sep { width: 1px; height: 76px; background: var(--gold); opacity: 0.2; flex-shrink: 0; }
    .band-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      flex-shrink: 0;
    }
    .band-stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.6rem;
      font-weight: 300;
      color: var(--gold-light);
      line-height: 1;
    }
    .band-stat-lbl {
      font-size: 0.52rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-muted);
      text-align: center;
    }

    /* ══════════════════════════════════════════════════════════
       SECTION SHARED
    ══════════════════════════════════════════════════════════ */
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      margin-bottom: 0.9rem;
    }
    .eyebrow span {
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .eyebrow::after { content:''; width:2.4rem; height:1px; background:var(--gold); opacity:0.5; }

    /* ══════════════════════════════════════════════════════════
       SERVICIOS
    ══════════════════════════════════════════════════════════ */
    .servicios {
      background: var(--bg-cream);
      padding: 8.5rem 5vw 7rem;
    }
    .servicios-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5vw;
      align-items: end;
      margin-bottom: 5.5rem;
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
    }
    .servicios-h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.4rem, 4.2vw, 3.8rem);
      font-weight: 300;
      color: var(--text-on-cream);
      line-height: 1.15;
    }
    .servicios-h2 em { font-style: italic; color: var(--gold); }
    .servicios-lead {
      font-size: 0.95rem;
      font-weight: 300;
      line-height: 2;
      color: var(--text-on-cream-3);
      align-self: end;
    }

    /* Cards */
    .servicios-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      max-width: 1280px;
      margin: 0 auto;
      border: 1px solid rgba(184,134,11,0.22);
    }
    .serv-card {
      padding: 3.2rem 2.6rem 3rem;
      border-right: 1px solid rgba(184,134,11,0.22);
      position: relative;
      transition: background 0.4s;
      cursor: default;
    }
    .serv-card:last-child { border-right: none; }
    .serv-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(to right, var(--gold), var(--gold-pale));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.48s ease;
    }
    .serv-card:hover::after { transform: scaleX(1); }
    .serv-card:hover { background: rgba(184,134,11,0.03); }

    .serv-num { font-family:'Cormorant Garamond',serif; font-size:0.72rem; letter-spacing:0.2em; color:var(--gold); opacity:0.65; margin-bottom:1.8rem; }
    .serv-icon { width:50px; height:50px; margin-bottom:1.8rem; }
    .serv-name { font-family:'Cormorant Garamond',serif; font-size:1.85rem; font-weight:500; color:var(--text-on-cream); line-height:1.2; margin-bottom:0.4rem; }
    .serv-tag  { font-size:0.62rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem; }
    .serv-desc { font-size:0.92rem; font-weight:300; line-height:1.9; color:var(--text-on-cream-3); }
    .serv-list {
      margin-top:1.8rem;
      padding-top:1.8rem;
      border-top:1px solid rgba(184,134,11,0.14);
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:0.6rem;
    }
    .serv-list li { font-size:0.82rem; font-weight:400; color:var(--text-muted); display:flex; align-items:center; gap:0.75rem; }
    .serv-list li::before { content:''; width:4px; height:4px; border:1px solid var(--gold); transform:rotate(45deg); flex-shrink:0; }

    /* ══════════════════════════════════════════════════════════
       PROCESO
    ══════════════════════════════════════════════════════════ */
    .proceso { background: var(--bg-dark); padding: 8.5rem 5vw; }
    .proceso-inner { max-width: 1280px; margin: 0 auto; }

    .proceso-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 4rem;
      margin-bottom: 5.5rem;
    }
    .proceso-h2 {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(2.2rem,3.8vw,3.4rem);
      font-weight:300;
      color:var(--proc-name);
      line-height:1.22;
      max-width:480px;
    }
    .proceso-h2 em { font-style:italic; color:var(--gold-light); }
    .proceso-pullquote {
      font-family:'Cormorant Garamond',serif;
      font-size:1.08rem;
      font-style:italic;
      color:var(--proc-desc);
      max-width:280px;
      text-align:right;
      line-height:1.82;
    }

    .proceso-grid { display:grid; grid-template-columns:repeat(3,1fr); }
    .proc-item {
      padding:2.8rem 2.4rem;
      border-right:1px solid var(--proc-border);
      border-bottom:1px solid var(--proc-border);
      transition:background 0.3s;
    }
    .proc-item:hover { background: rgba(184,134,11,0.055); }
    .proc-item:nth-child(3n) { border-right:none; }
    .proc-item:nth-child(n+4) { border-bottom:none; }

    .proc-big-num {
      font-family:'Cormorant Garamond',serif;
      font-size:3.8rem;
      font-weight:300;
      color:var(--proc-num-col);
      line-height:1;
      margin-bottom:1.1rem;
      display:block;
      transition:color 0.3s;
    }
    .proc-item:hover .proc-big-num { color:rgba(184,134,11,0.22); }
    .proc-icon { width:36px; height:36px; margin-bottom:1.2rem; }
    .proc-name { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:500; color:var(--proc-name); margin-bottom:0.7rem; line-height:1.32; }
    .proc-desc { font-size:0.88rem; font-weight:300; line-height:1.85; color:var(--proc-desc); }

    /* ══════════════════════════════════════════════════════════
       VISIÓN
    ══════════════════════════════════════════════════════════ */
    .vision { background:var(--bg-cream-2); padding:8.5rem 5vw; }
    .vision-inner {
      max-width:1280px;
      margin:0 auto;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:7vw;
      align-items:center;
    }
    .vision-h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.1rem,3.6vw,3.1rem); font-weight:300; color:var(--text-on-cream); line-height:1.25; margin-bottom:1.8rem; }
    .vision-h2 em { font-style:italic; color:var(--gold); }
    .vision-p { font-size:0.95rem; font-weight:300; line-height:2; color:var(--text-on-cream-3); margin-bottom:1.4rem; }
    .vision-p:last-child { margin-bottom:0; }
    .vision-right { display:flex; justify-content:center; align-items:center; }

    .vision-photo-wrap {
      display: inline-block;
      padding: 6px;
      background: linear-gradient(135deg, #EDD07A 0%, #B8860B 30%, #7A5C0A 60%, #D4AF37 100%);
      border-radius: 20px;
      box-shadow:
        0 6px 24px rgba(184,134,11,0.45),
        0 24px 70px rgba(0,0,0,0.22);
    }

    .vision-photo {
      display: block;
      width: 500px;
      max-width: 100%;
      height: 460px;
      object-fit: cover;
      border-radius: 15px;
    }

    /* ══════════════════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════════════════ */
    footer {
      background: var(--bg-footer);
      border-top: 1px solid rgba(184,134,11,0.18);
      padding: 5rem 5vw 2.5rem;
    }
    .footer-inner { max-width:1280px; margin:0 auto; }
    .footer-top {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:3rem;
      padding-bottom:3.5rem;
      border-bottom:1px solid var(--footer-sep);
      margin-bottom:2rem;
    }

    .footer-brand-sub { font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--footer-text); margin-top:0.55rem; }

    .footer-col-label { font-size:0.62rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--footer-text); margin-bottom:1rem; }
    .footer-list { list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
    .footer-list li { font-size:0.8rem; font-weight:300; color:var(--footer-text); }

    .footer-contact p { font-size:0.82rem; font-weight:300; color:var(--footer-text); line-height:1.9; }
    .footer-contact a { color:var(--gold); text-decoration:none; }
    .footer-contact a:hover { color:var(--gold-light); }

    .footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
    .footer-copy { font-size:0.66rem; letter-spacing:0.08em; color:var(--footer-text); opacity:0.75; }
    .footer-svc-row { display:flex; gap:1.4rem; align-items:center; }
    .footer-svc-row span { font-size:0.6rem; letter-spacing:0.15em; color:var(--footer-text); opacity:0.6; }
    .footer-legal-link {
      background: none; border: none; cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--footer-text);
      padding: 0; transition: color 0.25s;
    }
    .footer-legal-link:hover { color: var(--gold); }
    .cookie-link-btn {
      background: none; border: none; padding: 0; cursor: pointer;
      font-size: inherit; font-weight: inherit; font-family: inherit;
      color: var(--gold); text-decoration: underline;
      text-decoration-color: rgba(184,134,11,0.35);
      text-underline-offset: 2px;
    }
    .cookie-link-btn:hover { color: var(--gold-light); }

    /* ══════════════════════════════════════════════════════════
       REVEAL ANIMATIONS
    ══════════════════════════════════════════════════════════ */
    .reveal { opacity:0; transform:translateY(26px); transition:opacity 0.88s ease, transform 0.88s ease; }
    .reveal.in { opacity:1; transform:translateY(0); }
    .reveal.d1 { transition-delay:0.08s; }
    .reveal.d2 { transition-delay:0.16s; }
    .reveal.d3 { transition-delay:0.25s; }
    .reveal.d4 { transition-delay:0.33s; }
    .reveal.d5 { transition-delay:0.41s; }
    .reveal.d6 { transition-delay:0.49s; }

    /* ══════════════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 960px) {
      nav { padding:1.1rem 4vw; }
      .nav-links { display:none; }

      .intro-band { flex-direction:column; align-items:flex-start; gap:1.8rem; }
      .band-sep { display:none; }

      .servicios-header { grid-template-columns:1fr; gap:2rem; }
      .servicios-grid { grid-template-columns:1fr; }
      .serv-card { border-right:none; border-bottom:1px solid rgba(184,134,11,0.2); }
      .serv-card:last-child { border-bottom:none; }

      .proceso-top { flex-direction:column; align-items:flex-start; }
      .proceso-pullquote { text-align:left; }
      .proceso-grid { grid-template-columns:1fr 1fr; }
      .proc-item:nth-child(3n)  { border-right:1px solid var(--proc-border); }
      .proc-item:nth-child(2n)  { border-right:none; }
      .proc-item:nth-child(n+5) { border-bottom:none; }
      .proc-item:nth-child(n+4) { border-bottom:1px solid var(--proc-border); }

      .vision-inner { grid-template-columns:1fr; }
      .vision-right { display:none; }

      .footer-top { flex-direction:column; gap:2.2rem; }
      .footer-bottom { flex-direction:column; align-items:flex-start; }
    }
    @media (max-width: 560px) {
      .hero-tags { flex-wrap:wrap; justify-content:center; gap:0.75rem; }
      .proceso-grid { grid-template-columns:1fr; }
      .proc-item:nth-child(n) { border-right:none; }
      .proc-item:nth-child(n+5) { border-bottom:none; }
      .proc-item:nth-child(n+6) { border-bottom:none; }
    }

    /* ══════════════════════════════════════════════════════════
       COOKIE BANNER
    ══════════════════════════════════════════════════════════ */
    .cookie-banner {
      position: fixed;
      bottom: 1.6rem;
      right: 1.6rem;
      z-index: 9999;
      max-width: 360px;
      background: var(--bg-footer);
      border: 1px solid rgba(184,134,11,0.28);
      border-radius: 4px;
      padding: 1.5rem 1.6rem;
      box-shadow: 0 8px 40px rgba(0,0,0,0.22);
      animation: bannerIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes bannerIn {
      from { opacity:0; transform:translateY(18px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .cookie-banner.hidden { display:none; }
    .cookie-banner-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--text-on-dark);
      margin-bottom: 0.65rem;
      letter-spacing: 0.04em;
    }
    .cookie-banner p {
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.85;
      color: var(--text-muted);
      margin-bottom: 1.2rem;
    }
    .cookie-banner p a {
      color: var(--gold);
      text-decoration: underline;
      text-decoration-color: rgba(184,134,11,0.35);
      text-underline-offset: 2px;
    }
    .cookie-banner p a:hover { color: var(--gold-light); }
    .cookie-btn-row { display:flex; gap:0.75rem; }
    .cookie-btn-accept {
      flex:1;
      background: var(--gold);
      color: #fff;
      border: none;
      padding: 0.62rem 1rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: background 0.25s;
    }
    .cookie-btn-accept:hover { background: var(--gold-light); }
    .cookie-btn-decline {
      background: none;
      color: var(--text-muted);
      border: 1px solid rgba(184,134,11,0.22);
      padding: 0.62rem 1rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: border-color 0.25s, color 0.25s;
    }
    .cookie-btn-decline:hover { border-color: rgba(184,134,11,0.5); color: var(--text-dim); }

    /* ══════════════════════════════════════════════════════════
       LEGAL MODALS
    ══════════════════════════════════════════════════════════ */
    .legal-overlay {
      position: fixed; inset:0; z-index:10000;
      background: rgba(0,0,0,0.72);
      display:flex; align-items:center; justify-content:center;
      padding:1.5rem;
      backdrop-filter: blur(4px);
      opacity:0; pointer-events:none;
      transition: opacity 0.3s;
    }
    .legal-overlay.open { opacity:1; pointer-events:all; }
    .legal-modal {
      background: var(--bg-cream);
      border: 1px solid rgba(184,134,11,0.22);
      border-radius: 4px;
      max-width: 720px; width:100%;
      max-height: 82vh;
      overflow-y: auto;
      padding: 3rem 3.2rem;
      position: relative;
    }
    .legal-modal h2 {
      font-family:'Cormorant Garamond',serif;
      font-size: 1.9rem; font-weight:400;
      color: var(--text-on-cream);
      margin-bottom: 0.5rem;
    }
    .legal-modal h3 {
      font-family:'Cormorant Garamond',serif;
      font-size:1.15rem; font-weight:500;
      color: var(--text-on-cream);
      margin: 1.8rem 0 0.5rem;
    }
    .legal-modal p, .legal-modal li {
      font-size:0.75rem; font-weight:300; line-height:1.95;
      color: var(--text-on-cream-3);
      margin-bottom: 0.6rem;
    }
    .legal-modal ul { padding-left:1.4rem; margin-bottom:0.8rem; }
    .legal-close {
      position:absolute; top:1.4rem; right:1.6rem;
      background:none; border:none; cursor:pointer;
      font-size:1.4rem; line-height:1;
      color: var(--text-muted);
      transition: color 0.2s;
    }
    .legal-close:hover { color: var(--gold); }
    .legal-sep { width:2.4rem; height:1px; background:var(--gold); opacity:0.45; margin-bottom:1.6rem; }

    @media (max-width:560px) {
      .cookie-banner { bottom:0; right:0; left:0; max-width:100%; border-radius:4px 4px 0 0; }
      .legal-modal { padding:2rem 1.4rem; }
    }

    /* ══════════════════════════════════════════════════════════
       CONTACTO — two-column editorial layout (cf-* classes)
    ══════════════════════════════════════════════════════════ */
    .contacto-section {
      background: var(--bg-dark);
      padding: 8.5rem 5vw 7rem;
      border-top: 1px solid rgba(184,134,11,0.12);
    }
    .contacto-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7vw;
      align-items: start;
    }
    .contacto-left { padding-top: 0.5rem; }
    .contacto-h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.4vw, 3rem);
      font-weight: 300;
      color: var(--proc-name);
      line-height: 1.22;
      margin-bottom: 0.9rem;
    }
    .contacto-h2 em { font-style: italic; color: var(--gold-light); }
    .contacto-sub {
      font-size: 0.95rem;
      font-weight: 300;
      color: var(--proc-desc);
      line-height: 1.9;
      margin-bottom: 1.8rem;
    }
    .contacto-email-direct a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      color: var(--gold);
      text-decoration: none;
      letter-spacing: 0.04em;
      transition: color 0.25s;
    }
    .contacto-email-direct a:hover { color: var(--gold-light); }

    .cf-form { display: flex; flex-direction: column; gap: 1.4rem; }
    .cf-group { display: flex; flex-direction: column; gap: 0.45rem; }
    .cf-label {
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .cf-input {
      background: rgba(0,0,0,0.04);
      border: 1px solid rgba(184,134,11,0.25);
      border-radius: 2px;
      padding: 0.85rem 1rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.9rem;
      font-weight: 300;
      color: var(--text-on-cream);
      outline: none;
      transition: border-color 0.25s, background 0.25s;
      width: 100%;
    }
    .cf-input::placeholder { color: var(--text-on-cream-3); opacity: 0.7; }
    .cf-input:focus {
      border-color: rgba(184,134,11,0.55);
      background: rgba(0,0,0,0.07);
    }
    .cf-textarea { resize: vertical; min-height: 130px; line-height: 1.7; }

    .cf-foot {
      display: flex;
      align-items: center;
      gap: 1.6rem;
      flex-wrap: wrap;
      margin-top: 0.2rem;
    }
    .cf-submit {
      background: var(--gold);
      color: #fff;
      border: none;
      padding: 0.85rem 2.4rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 2px;
      transition: background 0.25s;
      flex-shrink: 0;
    }
    .cf-submit:hover { background: var(--gold-light); }
    .cf-submit:disabled { opacity: 0.5; cursor: not-allowed; }
    .cf-note {
      font-size: 0.72rem;
      font-weight: 300;
      color: var(--proc-desc);
      opacity: 0.75;
      line-height: 1.7;
    }
    .cf-feedback {
      padding: 0.95rem 1.2rem;
      border-radius: 2px;
      font-size: 0.85rem;
      font-weight: 300;
      margin-top: 0.4rem;
      line-height: 1.7;
    }
    .cf-success {
      background: rgba(184,134,11,0.1);
      border: 1px solid rgba(184,134,11,0.28);
      color: var(--gold-light);
    }
    .cf-error {
      background: rgba(180,40,40,0.1);
      border: 1px solid rgba(180,40,40,0.25);
      color: #d97070;
    }


    @media (max-width: 960px) {
      .contacto-inner { grid-template-columns: 1fr; gap: 3.5rem; }
    }
    @media (max-width: 560px) {
      .cf-foot { flex-direction: column; align-items: flex-start; }
    }
    /* ══════════════════════════════════════════════════════════
       CONFIRMATION POPUP
    ══════════════════════════════════════════════════════════ */
    .confirm-overlay {
      position: fixed; inset: 0; z-index: 10000;
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s;
    }
    .confirm-overlay.open { opacity: 1; pointer-events: all; }
    .confirm-card {
      background: var(--bg-dark);
      border: 1px solid rgba(184,134,11,0.3);
      border-radius: 4px;
      padding: 2.6rem 2.8rem 2.2rem;
      max-width: 360px; width: 100%;
      text-align: center;
      position: relative;
      transform: translateY(16px);
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .confirm-overlay.open .confirm-card { transform: translateY(0); }
    .confirm-x {
      position: absolute; top: 1rem; right: 1.1rem;
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); line-height: 1;
      transition: color 0.2s;
    }
    .confirm-x:hover { color: var(--gold); }
    .confirm-icon {
      color: var(--gold);
      margin-bottom: 1.2rem;
      display: flex; justify-content: center;
    }
    .confirm-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.55rem; font-weight: 400;
      color: var(--proc-name);
      margin-bottom: 0.65rem;
      letter-spacing: 0.02em;
    }
    .confirm-sub {
      font-size: 0.88rem; font-weight: 300;
      color: var(--proc-desc);
      line-height: 1.75;
    }

    /* ══════════════════════════════════════════════════════════
       LANGUAGE SWITCHER
    ══════════════════════════════════════════════════════════ */
    .lang-switcher-main {
      display: flex;
      gap: 0.35rem;
      align-items: center;
    }
    .lang-btn-main {
      background: none;
      border: 1px solid transparent;
      border-radius: 2px;
      padding: 2px 2px;
      cursor: pointer;
      opacity: 0.45;
      transition: opacity 0.2s, border-color 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
    }
    .lang-btn-main.active {
      opacity: 1;
      border-color: rgba(184,134,11,0.55);
    }
    .lang-btn-main:hover { opacity: 0.8; }
    .lang-btn-main svg {
      border-radius: 1px;
      flex-shrink: 0;
    }