/* ============================================================
     TOKENS
     ============================================================ */
  :root{
    --black:#111111;
    --carbon:#2B2B2B;
    --white:#FFFFFF;
    --gold:#D4AF37;
    --gold-dark:#B8860B;

    --ink-90: rgba(255,255,255,0.90);
    --ink-70: rgba(255,255,255,0.70);
    --ink-50: rgba(255,255,255,0.50);
    --ink-35: rgba(255,255,255,0.35);
    --ink-18: rgba(255,255,255,0.12);
    --ink-08: rgba(255,255,255,0.07);

    --gold-40: rgba(212,175,55,0.40);
    --gold-22: rgba(212,175,55,0.22);
    --gold-12: rgba(212,175,55,0.12);

    --font-display: 'Cinzel', serif;
    --font-body: 'Poppins', sans-serif;

    --container: 1240px;
    --gutter: clamp(24px, 6vw, 96px);
    --section-y: clamp(96px, 13vw, 184px);

    /* two eases: a settle for reveals, a snap for interactive hovers */
    --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-snap: cubic-bezier(0.65, 0, 0.35, 1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth; overflow-x:hidden;}

  body{
    background:var(--black);
    color:var(--white);
    font-family:var(--font-body);
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--gold);color:var(--black);}

  :focus-visible{
    outline:1px solid var(--gold);
    outline-offset:5px;
  }

  .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 var(--gutter);
  }

  .eyebrow{
    font-family:var(--font-body);
    font-weight:500;
    font-size:11.5px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:14px;
  }
  .eyebrow::before{
    content:"";
    width:28px;
    height:1px;
    background:var(--gold-40);
    display:inline-block;
  }

  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:500;
    letter-spacing:0.008em;
  }

  h2{
    font-size:clamp(32px, 4vw, 54px);
    line-height:1.14;
    font-weight:500;
  }

  h3{
    font-size:clamp(20px, 2.2vw, 26px);
    font-weight:500;
  }

  p{ color:var(--ink-70); font-weight:300; }

  .lede{
    font-size:clamp(17px, 1.6vw, 20px);
    line-height:1.85;
    color:var(--ink-70);
    max-width:640px;
  }

  .gold{color:var(--gold);}

  .hairline{
    width:100%;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-22), transparent);
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:18px 34px;
    border:1px solid var(--gold);
    color:var(--white);
    background:transparent;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    transition:color 0.55s var(--ease-settle), border-color 0.55s var(--ease-settle), transform 0.45s var(--ease-snap);
    white-space:nowrap;
  }
  .btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--gold);
    transform:translateY(101%);
    transition:transform 0.55s var(--ease-settle);
    z-index:-1;
  }
  .btn:hover{ color:var(--black); }
  .btn:hover::before{ transform:translateY(0); }
  .btn:active{ transform:scale(0.98); }
  .btn svg{ transition:transform 0.5s var(--ease-settle); flex-shrink:0; }
  .btn:hover svg{ transform:translateX(4px); }

  .btn-ghost{ border-color:var(--ink-18); }
  .btn-ghost::before{ background:var(--white); }
  .btn-ghost:hover{ color:var(--black); border-color:var(--white); }

  /* ============ REVEAL ============ */
  [data-reveal]{
    opacity:0;
    transform:translateY(30px);
    filter:blur(6px);
    transition:opacity 1.1s var(--ease-settle), transform 1.1s var(--ease-settle), filter 1.1s var(--ease-settle);
    transition-delay:var(--reveal-delay, 0s);
  }
  [data-reveal].is-visible{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
    [data-reveal]{opacity:1;transform:none;filter:none;}
  }

  /* ============ NAV ============ */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    padding:28px var(--gutter);
    display:flex;
    align-items:center;
    justify-content:space-between;
    transition:background 0.7s var(--ease-settle), padding 0.6s var(--ease-settle), border-color 0.7s var(--ease-settle);
    border-bottom:1px solid transparent;
  }
  .nav.is-scrolled{
    background:rgba(17,17,17,0.82);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    padding:16px var(--gutter);
    border-bottom:1px solid var(--gold-12);
  }

  .nav__logo{
    display:flex;
    align-items:center;
    color:var(--white);
  }
  .nav__logo img{
    height:44px;
    width:44px;
    object-fit:contain;
    display:block;
    transition:height 0.6s var(--ease-settle), width 0.6s var(--ease-settle), transform 0.5s var(--ease-settle);
  }
  .nav__logo:hover img{ transform:scale(1.04); }
  .nav.is-scrolled .nav__logo img{ height:36px; width:36px; }

  .nav > nav{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    justify-content:center;
    margin:0 clamp(18px,2vw,34px);
  }

  .nav__links{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:clamp(16px,1.35vw,28px);
    list-style:none;
  }

  .nav__links li{ display:flex; align-items:center; }

  .nav__links a{
    display:inline-block;
    font-size:clamp(9.5px,0.72vw,11px);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-70);
    position:relative;
    padding-bottom:6px;
    white-space:nowrap;
    transition:color 0.4s var(--ease-settle);
  }
  .nav__links a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0%;
    height:1px;
    background:var(--gold);
    transition:width 0.45s var(--ease-settle);
  }
  .nav__links a:hover,
  .nav__links a.is-active{ color:var(--white); }
  .nav__links a:hover::after,
  .nav__links a.is-active::after{ width:100%; }

  /* ---------- dropdowns (Nosotros / Servicios / Experiencias) ---------- */
  .has-dropdown{ position:relative; }
  .nav__parentRow{ display:flex; align-items:center; gap:5px; }

  /* Puente invisible de hover: cubre exactamente la brecha entre el botón
     y el panel del submenú (misma distancia que "top: calc(100% + 20px)"
     en .nav__dropdown), para que el cursor nunca abandone el área :hover
     de .has-dropdown mientras baja hacia el submenú. Sin esto, esa franja
     transparente no pertenece a ningún elemento y el hover se pierde antes
     de tiempo. Solo aplica en escritorio (ver override en el media query
     de móvil/tablet, donde el submenú funciona por clic, no por hover). */
  .has-dropdown::before{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width:220px; /* igual al min-width de .nav__dropdown */
    height:20px; /* igual a la brecha en .nav__dropdown (top: 100% + 20px) */
  }

  .nav__caret{
    display:inline-flex; align-items:center; justify-content:center;
    background:none; border:none; padding:6px; margin:-6px 0;
    color:var(--ink-35); cursor:pointer;
    transition:color 0.35s var(--ease-settle), transform 0.35s var(--ease-settle);
  }
  .nav__caret svg{ display:block; }
  .has-dropdown:hover .nav__caret,
  .has-dropdown.is-open .nav__caret{ color:var(--gold); transform:rotate(180deg); }

  /* Posicionamiento del panel flotante: SOLO existe en escritorio (mismo
     punto de corte que .nav__toggle). Al aislarlo aquí, en móvil/tablet
     estas reglas (position:absolute, left:50%, transform, etc.) ni
     siquiera se evalúan, así que no hay manera de que "compitan" con el
     acordeón — se elimina el problema de raíz en vez de parchear la
     especificidad. */
  @media (min-width:1500px){
    .nav__dropdown{
      position:absolute;
      top:calc(100% + 20px);
      left:50%;
      transform:translateX(-50%) translateY(6px);
      min-width:220px;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      z-index:1200;
    }
    .has-dropdown:hover .nav__dropdown,
    .has-dropdown.is-open .nav__dropdown{
      opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
    }
  }
  .nav__dropdown{
    padding:10px 0;
    margin:0;
    list-style:none;
    background:rgba(17,17,17,0.97);
    border:1px solid var(--gold-12);
    box-shadow:0 24px 48px rgba(0,0,0,0.45);
    transition:opacity 0.35s var(--ease-settle), transform 0.35s var(--ease-settle), visibility 0.35s;
  }
  .nav__dropdown li{ display:block; }
  .nav__dropdown a{
    display:block;
    padding:11px 26px;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-70);
    white-space:nowrap;
    transition:color 0.3s var(--ease-settle), background-color 0.3s var(--ease-settle);
  }
  .nav__dropdown a::after{ content:none; }
  .nav__dropdown a:hover,
  .nav__dropdown a.is-active{ color:var(--white); background:var(--gold-12); }

  .nav__cta{
    display:inline-flex;
    align-self:center;
    flex:0 0 auto;
    font-size:10.5px;
    padding:12px 20px;
    margin-left:26px;
  }
  @media (max-width:389px){
    .nav__cta{ display:none; } /* en el ancho más angosto no cabe sin apretar el resto */
  }

  /* ---------- language switch ---------- */
  .lang-switch{
    display:flex;
    align-items:center;
    gap:11px;
    font-family:var(--font-body);
    font-size:11px;
    letter-spacing:0.1em;
  }
  .lang-switch__btn{
    background:none;
    border:none;
    padding:4px 3px;
    color:var(--ink-35);
    cursor:pointer;
    font-family:inherit;
    font-size:inherit;
    letter-spacing:inherit;
    transition:color 0.4s var(--ease-settle);
  }
  .lang-switch__btn:hover{ color:var(--ink-70); }
  .lang-switch__btn[aria-pressed="true"]{ color:var(--gold); }
  .lang-switch__sep{ color:var(--ink-18); font-size:10px; }

  .nav__toggle{
    margin-left:22px;
    display:flex; flex-direction:column; gap:6px;
    background:none; border:none; cursor:pointer; padding:8px; z-index:1100;
  }
  .nav__toggle span{
    width:24px; height:1px; background:var(--white);
    transition:transform 0.4s var(--ease-settle), opacity 0.4s var(--ease-settle);
  }
  .nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2){ opacity:0; }
  .nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  @media (min-width:1500px){ .nav__toggle{ display:none; } }
  @media (max-width:1499px){
    .nav > nav{ margin:0; }
    .nav__links{
      position:fixed; inset:0;
      flex-direction:column; justify-content:flex-start; align-items:flex-start;
      padding:112px var(--gutter) 48px;
      background:var(--black);
      transform:translateY(-100%);
      opacity:0;
      transition:transform 0.6s var(--ease-settle), opacity 0.5s var(--ease-settle);
      gap:24px;
      z-index:1050;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
    }
    .nav__links.is-open{ transform:translateY(0); opacity:1; }
    .nav__links a{ font-size:24px; font-family:var(--font-display); }

    /* En móvil/tablet los submenús se comportan como acordeón, no como
       panel flotante: no hay :hover confiable en pantallas táctiles, así
       que se abren únicamente al tocar el caret. El puente invisible de
       hover (pensado para escritorio) se desactiva aquí para que no quede
       una franja fantasma sobre otros elementos táctiles. */
    .has-dropdown::before{ content:none; }

    .nav__links li.has-dropdown{
      flex-direction:column;
      align-items:flex-start;
      width:100%;
      gap:0;
    }
    .nav__parentRow{ width:100%; justify-content:space-between; }
    .nav__caret{ padding:10px; margin:-10px; }

    .nav__dropdown{
      position:static;
      opacity:1;
      visibility:visible;
      pointer-events:auto;
      background:none;
      border:none;
      box-shadow:none;
      min-width:0;
      width:100%;
      padding:0 0 0 24px;
      max-height:0;
      overflow:hidden;
      transition:max-height 0.5s var(--ease-settle), padding-top 0.5s var(--ease-settle);
    }
    .has-dropdown.is-open .nav__dropdown{
      max-height:420px;
      padding-top:14px;
    }
    .nav__dropdown a{
      display:block;
      width:100%;
      padding:12px 0;
      font-size:17px;
      font-family:var(--font-display);
      text-align:left;
      color:var(--ink-70);
      white-space:normal;
    }

    /* ---------- refuerzo defensivo adicional ----------
       Capa extra de seguridad: fuerza explícitamente que el submenú y
       todos sus elementos internos (contenedor, lista, ítems, enlaces)
       nunca puedan exceder el ancho visible ni heredar un transform u
       offset residual, sin tocar .nav__links (que sí necesita su propio
       transform para la animación de apertura del menú principal). */
    .has-dropdown,
    .has-dropdown .nav__parentRow,
    .has-dropdown .nav__dropdown,
    .has-dropdown .nav__dropdown li,
    .has-dropdown .nav__dropdown a{
      width:100%;
      max-width:100%;
      box-sizing:border-box;
      margin-left:0;
      margin-right:0;
      left:auto;
      right:auto;
      transform:none;
    }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:72svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
  }

  /* Scene: definitive ORIGEN studio hero photograph. */
  .hero__scene{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:var(--black); /* letterbox colour if object-fit:contain kicks in */
  }

  .hero__photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    will-change:transform;
  }

  @media (max-width:760px){
    .hero{ min-height:82svh; }
    .hero__photo{ object-fit:cover; object-position:62% center; }
  }

  /* Scrim: keeps the wordmark legible over the photograph without flattening it */
  .hero__scrim{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(17,17,17,0.34) 0%, rgba(17,17,17,0.10) 22%, rgba(17,17,17,0.18) 55%, rgba(17,17,17,0.92) 90%, var(--black) 100%),
      radial-gradient(ellipse 60% 45% at 82% 18%, rgba(212,175,55,0.10), transparent 62%);
    pointer-events:none;
  }

  .hero__content{
    position:relative;
    z-index:3;
    padding:0 var(--gutter) 48px;
    max-width:960px;
  }

  .hero__eyebrow{ margin-bottom:30px; }

  .hero h1{
    font-size:clamp(42px, 6.2vw, 82px);
    line-height:1.06;
    font-weight:500;
    color:var(--white);
    max-width:15ch;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--gold);
  }

  .hero__sub{
    margin-top:30px;
    font-size:clamp(16px, 1.5vw, 19px);
    color:var(--ink-70);
    max-width:520px;
    font-weight:300;
    padding-left:24px;
    border-left:1px solid var(--gold-40);
  }

  .hero__actions{
    margin-top:52px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
  }

  .hero__foot{
    position:relative;
    z-index:3;
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
    padding:0 var(--gutter) 40px;
  }

  .hero__scroll{
    display:flex; align-items:center; gap:12px;
    font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink-50);
  }
  .hero__scroll .line{
    width:1px; height:34px; background:var(--gold-40);
    position:relative; overflow:hidden;
  }
  .hero__scroll .line::after{
    content:""; position:absolute; top:-100%; left:0; right:0; height:100%;
    background:var(--gold);
    animation:scrollLine 2.6s ease-in-out infinite;
  }
  @keyframes scrollLine{ 0%{top:-100%;} 50%{top:0%;} 100%{top:100%;} }

  .hero__place{
    font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--ink-35);
    text-align:right;
  }
  .hero__place span{ display:block; color:var(--gold); margin-top:4px; }


  /* ============ INTERLUDE (pausas de ritmo) ============ */
  .interlude{
    padding:clamp(64px,9vw,110px) 0;
    text-align:center;
    position:relative;
  }
  .interlude p{
    font-family:var(--font-display);
    font-size:clamp(18px,2vw,24px);
    color:var(--ink-90);
    letter-spacing:0.01em;
    max-width:20ch;
    margin:0 auto;
  }
  .interlude--wide p{ max-width:26ch; font-size:clamp(24px,3.4vw,40px); }
  .interlude .mark-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--gold);
    margin:0 auto 28px;
  }

  /* ============ SECTION SHELL ============ */
  section{ padding:var(--section-y) 0; position:relative; }
  section[hidden]{ display:none !important; }

  .section-head{ max-width:720px; margin-bottom:clamp(52px,6.4vw,96px); }
  .section-head h2{ margin-top:22px; }
  .section-head .lede{ margin-top:20px; }

  /* ============ HISTORIA ============ */
  .historia{
    background-color:var(--black);
    background-image:
      radial-gradient(ellipse 55% 40% at 82% 15%, rgba(212,175,55,0.06), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.16) 58%, rgba(0,0,0,0.22) 78%, var(--black) 100%),
      url('../assets/hero/hero-ambient-1600.jpg');
    background-size:auto, cover, cover;
    background-position:center, center, center 30%;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }

  .historia__grid{ display:grid; grid-template-columns:1fr; gap:56px; }
  @media (min-width:960px){
    .historia__grid{ grid-template-columns:0.85fr 1.15fr; gap:100px; align-items:center; }
  }

  .historia__photo{
    position:relative;
    aspect-ratio:3/4;
    overflow:hidden;
    border:1px solid var(--ink-18);
  }
  @media (min-width:960px){ .historia__photo{ aspect-ratio:3/3.6; } }
  .historia__photo img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    transition:transform 1.1s var(--ease-settle);
  }
  .historia__photo:hover img{ transform:scale(1.035); }

  .historia__quote{
    font-family:var(--font-display);
    font-size:clamp(24px,2.6vw,34px);
    line-height:1.42;
    color:var(--white);
    border-left:1px solid var(--gold);
    padding-left:28px;
  }
  .historia__signature{
    margin-top:40px;
    margin-bottom:44px;
    font-family:var(--font-display);
    font-size:12.5px;
    letter-spacing:0.14em;
    color:var(--ink-35);
    text-transform:uppercase;
  }

  .historia__body p{ margin-bottom:22px; }
  .historia__body p:last-child{ margin-bottom:0; }
  .historia__body p:first-of-type::first-letter{
    font-family:var(--font-display);
    font-size:64px;
    line-height:0.7;
    float:left;
    padding:8px 10px 0 0;
    color:var(--gold);
  }

  .historia__link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-70);
    padding-bottom:4px;
    border-bottom:1px solid var(--gold-40);
    transition:border-color 0.4s var(--ease-settle), gap 0.4s var(--ease-settle), color 0.4s var(--ease-settle);
  }
  .historia__link:hover{ border-color:var(--gold); gap:16px; color:var(--gold); }

  /* ---------- Nuestra Filosofía: respiro editorial dentro de Historia ---------- */
  .historia__philosophy{
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
    margin-top:clamp(80px,10vw,140px);
    align-items:center;
  }
  @media (min-width:960px){
    .historia__philosophy{ grid-template-columns:1.2fr 0.8fr; gap:90px; }
  }
  .historia__philosophyPhoto{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    border:1px solid var(--ink-18);
  }
  .historia__philosophyPhoto img{ width:100%; height:100%; object-fit:cover; object-position:center; }
  .historia__philosophyText .eyebrow{ margin-bottom:20px; }
  .historia__philosophyText p[data-i18n="historia.p3"]{
    font-size:clamp(17px,1.6vw,20px);
    line-height:1.8;
    color:var(--ink-70);
    max-width:46ch;
  }

  /* ============ SERVICIOS ============ */
  .servicios{ background:var(--black); }
  .servicios__list{ border-top:1px solid var(--ink-18); }

  .servicio{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding:34px 0;
    border-bottom:1px solid var(--ink-18);
    position:relative;
    transition:padding-left 0.6s var(--ease-settle);
  }
  @media (min-width:760px){
    .servicio{ grid-template-columns:120px 1fr 1.3fr; gap:32px; align-items:baseline; }
  }
  .servicio::before{
    content:"";
    position:absolute; left:0; top:0; bottom:0;
    width:2px; background:var(--gold);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform 0.6s var(--ease-settle);
  }
  .servicio:hover{ padding-left:22px; }
  .servicio:hover::before{ transform:scaleY(1); }

  .servicio__index{
    font-family:var(--font-display);
    font-size:12px;
    color:var(--ink-35);
    letter-spacing:0.08em;
  }

  .servicio__name{
    font-family:var(--font-display);
    font-size:clamp(20px,2vw,28px);
  }

  .servicio__desc{ color:var(--ink-50); font-size:15px; max-width:52ch; }

  /* ---------- servicio-row: presentación editorial de gran formato ---------- */
  .servicio-row{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
    padding:56px 0;
    border-bottom:1px solid var(--ink-18);
  }

  @media (min-width:860px){
    .servicio-row--photo{
      grid-template-columns:1fr 1fr;
      gap:72px;
      align-items:center;
      padding:72px 0;
    }
    .servicio-row--photo.is-reverse{ direction:rtl; }
    .servicio-row--photo.is-reverse > *{ direction:ltr; }
  }

  .servicio-row__media{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
  }
  .servicio-row__media img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    transition:transform 1.2s var(--ease-settle);
  }
  .servicio-row__media:hover img{ transform:scale(1.035); }

  .servicio-row__index{
    font-family:var(--font-display);
    font-size:13px;
    letter-spacing:0.08em;
    color:var(--gold);
  }
  .servicio-row__name{
    font-family:var(--font-display);
    font-size:clamp(26px,3vw,38px);
    margin-top:16px;
    color:var(--white);
  }
  .servicio-row__desc{
    margin-top:18px;
    font-size:16px;
    line-height:1.75;
    color:var(--ink-50);
    max-width:44ch;
  }

  /* ============ MÉTODO ORIGEN — experiencia vertical ============ */
  .metodo{
    background-color:var(--black);
    background-image:
      radial-gradient(ellipse 50% 38% at 12% 20%, rgba(212,175,55,0.05), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.16) 58%, rgba(0,0,0,0.22) 78%, var(--black) 100%),
      url('../assets/hero/hero-ambient-1600.jpg');
    background-size:auto, cover, cover;
    background-position:center, center, center 65%;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }

  .metodo__layout{
    display:grid;
    grid-template-columns:1fr;
    gap:64px;
    align-items:start;
  }
  @media (min-width:960px){
    .metodo__layout{ grid-template-columns:1.35fr 1fr; gap:80px; }
  }

  .metodo__photo{ position:relative; }
  @media (min-width:960px){ .metodo__photo{ position:sticky; top:140px; } }
  .metodo__photo picture{
    display:block;
    aspect-ratio:3/2;
    overflow:hidden;
    border:1px solid var(--ink-18);
  }
  .metodo__photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
  .metodo__photo figcaption{
    margin-top:16px;
    font-size:12.5px;
    color:var(--ink-35);
    letter-spacing:0.02em;
    max-width:42ch;
  }

  .metodo__list{
    position:relative;
    max-width:900px;
  }
  .metodo__list::before{
    content:"";
    position:absolute;
    left:31px; top:8px; bottom:8px;
    width:1px;
    background:linear-gradient(180deg, transparent, var(--gold-22) 8%, var(--gold-22) 92%, transparent);
  }

  .metodo__step{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:30px;
    padding:30px 0;
    position:relative;
  }

  .metodo__num{
    font-family:var(--font-display);
    font-size:14px;
    color:var(--gold);
    letter-spacing:0.05em;
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px; height:64px;
    border:1px solid var(--gold-22);
    border-radius:50%;
    background:var(--black);
    transition:border-color 0.5s var(--ease-settle), transform 0.5s var(--ease-settle);
  }
  .metodo__step:hover .metodo__num{
    border-color:var(--gold);
    transform:scale(1.06);
  }
  .metodo__step.is-visible .metodo__num{
    animation:metodoLetterGlow 1.7s var(--ease-settle) both;
  }
  @keyframes metodoLetterGlow{
    0%{ box-shadow:0 0 0 rgba(212,175,55,0); border-color:var(--gold-22); }
    45%{ box-shadow:0 0 22px rgba(212,175,55,0.30); border-color:var(--gold); }
    100%{ box-shadow:0 0 0 rgba(212,175,55,0); border-color:var(--gold-22); }
  }

  .metodo__body{ padding-top:8px; }
  .metodo__body h3{ margin-bottom:10px; color:var(--white); }
  .metodo__body p{ font-size:15px; max-width:52ch; }

  .metodo__step:nth-child(even) .metodo__body{ padding-left:8px; }
  @media (min-width:760px){
    .metodo__step:nth-child(even){ transform:translateX(38px); }
  }

  /* ============ EXPERIENCIAS ORIGEN ============ */
  .experiencias{
    background-color:var(--black);
    background-image:
      radial-gradient(ellipse 55% 40% at 85% 72%, rgba(212,175,55,0.05), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.16) 58%, rgba(0,0,0,0.22) 78%, var(--black) 100%),
      url('../assets/hero/hero-ambient-1600.jpg');
    background-size:auto, cover, cover;
    background-position:center, center, center 40%;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }

  .experiencias__photo{
    margin:clamp(48px,6vw,80px) 0;
    aspect-ratio:16/8;
    overflow:hidden;
    border:1px solid var(--ink-18);
  }
  .experiencias__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }

  .experiencias__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:56px;
  }
  @media (min-width:860px){
    .experiencias__grid{ grid-template-columns:1fr 1fr; gap:100px; }
  }

  .experiencias__col h3{
    font-size:15px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold);
    font-family:var(--font-body);
    font-weight:500;
    margin-bottom:22px;
  }

  .experiencias__intro p{ margin-bottom:16px; max-width:66ch; }
  .experiencias__intro p:last-child{ margin-bottom:0; }

  .experiencias__list{
    list-style:none;
    border-top:1px solid var(--ink-18);
  }
  .experiencias__list li{
    padding:18px 0;
    border-bottom:1px solid var(--ink-18);
    transition:padding-left 0.5s var(--ease-settle);
  }
  .experiencias__list li:hover{ padding-left:14px; }
  .experiencias__name{
    display:block;
    font-family:var(--font-display);
    font-size:clamp(18px,1.8vw,22px);
    color:var(--white);
    transition:color 0.5s var(--ease-settle);
  }
  .experiencias__list li:hover .experiencias__name{ color:var(--gold); }
  .experiencias__desc{
    margin-top:8px;
    font-size:14px;
    color:var(--ink-50);
    max-width:48ch;
  }

  .experiencias__visionLede{ margin-bottom:18px; font-size:15px; }

  .experiencias__tags{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .experiencias__tags li{
    font-size:12.5px;
    letter-spacing:0.05em;
    color:var(--ink-70);
    border:1px solid var(--ink-18);
    border-radius:999px;
    padding:9px 18px;
    transition:border-color 0.4s var(--ease-settle), color 0.4s var(--ease-settle);
  }
  .experiencias__tags li:hover{ border-color:var(--gold-40); color:var(--white); }

  .experiencias__close{
    margin-top:56px;
    padding-top:40px;
    border-top:1px solid var(--ink-18);
    text-align:center;
    font-family:var(--font-display);
    font-size:clamp(18px,2vw,22px);
    color:var(--white);
  }

  /* ============ ORIGEN COMMUNITY ============ */
  .community{
    background-color:var(--black);
    background-image:
      radial-gradient(ellipse 50% 38% at 15% 78%, rgba(212,175,55,0.05), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.16) 58%, rgba(0,0,0,0.22) 78%, var(--black) 100%),
      url('../assets/hero/hero-ambient-1600.jpg');
    background-size:auto, cover, cover;
    background-position:center, center, center 55%;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }

  .community__intro p{ margin-bottom:16px; max-width:66ch; }
  .community__intro p:last-child{ margin-bottom:0; }

  .community__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--ink-08);
    margin-top:48px;
    align-items:stretch;
  }
  @media (min-width:860px){
    .community__grid{ grid-template-columns:repeat(3,1fr); }
  }

  .community__item{
    background:var(--black);
    padding:36px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    transition:background 0.5s var(--ease-settle);
  }
  .community__item:hover{ background:#141414; }
  .community__item h3{
    font-family:var(--font-display);
    font-size:19px;
    color:var(--gold);
    margin-bottom:14px;
  }
  .community__item p{ font-size:14.5px; color:var(--ink-70); }

  .community__item--photo{ padding:0; display:flex; flex-direction:column; }
  .community__item__media{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
  }
  .community__item__media img{
    width:100%; height:100%; object-fit:cover; object-position:center top;
    transition:transform 1.1s var(--ease-settle);
  }
  .community__item--photo:hover .community__item__media img{ transform:scale(1.035); }
  .community__item__body{ padding:28px 30px 36px; }
  .community__item__body h3{
    font-family:var(--font-display);
    font-size:19px;
    color:var(--gold);
    margin-bottom:14px;
  }
  .community__item__body p{ font-size:14.5px; color:var(--ink-70); }

  .community__impact{
    margin-top:56px;
    text-align:center;
  }
  .community__impact p{
    font-family:var(--font-display);
    font-size:clamp(19px,2.2vw,26px);
    color:var(--white);
    max-width:34ch;
    margin:0 auto;
  }

  .community__close{
    margin-top:32px;
    text-align:center;
    font-size:14.5px;
    color:var(--ink-50);
    max-width:52ch;
    margin-left:auto;
    margin-right:auto;
  }

  /* ============ PORTAFOLIO — spread editorial ============ */
  .portafolio{ background:var(--black); }

  .proyecto{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    border-top:1px solid var(--ink-18);
    padding:56px 0;
    align-items:center;
  }
  .portafolio__list{ border-bottom:1px solid var(--ink-18); }

  @media (min-width:860px){
    .proyecto{ grid-template-columns:1fr 1fr; gap:64px; }
    .proyecto--reverse{ direction:rtl; }
    .proyecto--reverse > *{ direction:ltr; }
  }

  .proyecto__frame{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--ink-18);
  }
  .proyecto__placeholder{
    position:absolute; inset:0;
    background:linear-gradient(135deg,#181510,#0d0d0d 60%,#141210);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink-35);
    font-size:10.5px; letter-spacing:0.1em; text-align:center;
    padding:0 18%;
    transition:transform 0.9s var(--ease-settle);
  }
  .proyecto__frame::after{
    content:"";
    position:absolute; inset:0;
    border:1px solid transparent;
    transition:border-color 0.5s var(--ease-settle);
    pointer-events:none;
  }
  .proyecto__frame:hover .proyecto__placeholder{ transform:scale(1.045); }
  .proyecto__frame:hover::after{ border-color:var(--gold-40); }

  .proyecto__info .index{
    font-family:var(--font-display);
    color:var(--gold);
    font-size:13px;
    letter-spacing:0.08em;
  }
  .proyecto__info .cat{
    display:block;
    margin-top:16px;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-35);
  }
  .proyecto__info .name{
    font-family:var(--font-display);
    font-size:clamp(24px,2.6vw,34px);
    margin-top:12px;
  }
  .proyecto__info .blurb{
    margin-top:16px;
    font-size:15px;
    max-width:44ch;
    color:var(--ink-50);
  }
  .proyecto__info .link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:26px;
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--white);
    padding-bottom:4px;
    border-bottom:1px solid var(--gold-40);
    transition:border-color 0.4s var(--ease-settle), gap 0.4s var(--ease-settle), color 0.4s var(--ease-settle);
  }
  .proyecto__info .link:hover{
    border-color:var(--gold);
    gap:16px;
    color:var(--gold);
  }

  /* ============ PROCESO ============ */
  .proceso{
    background-color:var(--black);
    background-image:
      radial-gradient(ellipse 50% 36% at 50% 10%, rgba(212,175,55,0.05), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.16) 58%, rgba(0,0,0,0.22) 78%, var(--black) 100%),
      url('../assets/hero/hero-ambient-1600.jpg');
    background-size:auto, cover, cover;
    background-position:center, center, center 70%;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }

  .proceso__photo{
    margin:clamp(40px,5vw,64px) 0 clamp(56px,7vw,88px);
    aspect-ratio:21/9;
    overflow:hidden;
    border:1px solid var(--ink-18);
  }
  .proceso__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
  @media (max-width:640px){ .proceso__photo{ aspect-ratio:4/3; } }

  .proceso__track{
    position:relative;
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
  }
  @media (min-width:640px) and (max-width:899px){
    .proceso__track{ grid-template-columns:repeat(2,1fr); }
  }
  @media (min-width:900px){
    .proceso__track{ grid-template-columns:repeat(5,1fr); gap:20px; }
    /* línea de progresión: solo visible en los huecos entre tarjetas */
    .proceso__track::before{
      content:"";
      position:absolute;
      left:40px; right:40px;
      top:58px;
      height:1px;
      background:linear-gradient(90deg, transparent, var(--gold-40) 10%, var(--gold-40) 90%, transparent);
      z-index:0;
    }
  }

  .proceso__stage{
    position:relative;
    z-index:1;
    background:var(--white);
    border:1px solid var(--ink-18);
    padding:32px 26px 30px;
    transition:box-shadow 0.4s var(--ease-settle), transform 0.4s var(--ease-settle), border-color 0.4s var(--ease-settle);
  }
  .proceso__stage:hover{
    border-color:var(--gold-40);
    box-shadow:0 14px 30px -14px rgba(0,0,0,0.16);
    transform:translateY(-3px);
  }
  .proceso__stage::after{
    content:"";
    position:absolute;
    bottom:0; left:26px;
    width:20px; height:2px;
    background:var(--olive);
  }

  .proceso__stageNum{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid var(--gold-40);
    background:var(--white);
    font-family:var(--font-display);
    font-size:14px;
    letter-spacing:0.02em;
    color:var(--gold-dark);
  }

  .proceso__stage h4{ margin-top:20px; margin-bottom:10px; font-size:16.5px; color:var(--carbon); }
  .proceso__stage p{ font-size:13.5px; line-height:1.65; padding-bottom:10px; }

  /* ============ TESTIMONIOS ============ */
  .testimonios{ background:var(--black); text-align:center; position:relative; }
  .testimonio{ max-width:820px; margin:0 auto; position:relative; }
  .testimonio::before{
    content:"“";
    position:absolute;
    top:-70px; left:50%;
    transform:translateX(-50%);
    font-family:var(--font-display);
    font-size:160px;
    color:var(--gold-12);
    line-height:1;
    pointer-events:none;
  }
  .testimonio blockquote{
    position:relative;
    font-family:var(--font-display);
    font-size:clamp(22px,2.8vw,34px);
    line-height:1.5;
    color:var(--white);
  }
  .testimonio cite{
    display:block; margin-top:28px; font-style:normal;
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-35);
  }

  /* ============ FAQ ============ */
  .faq{
    background-color:var(--black);
    background-image:
      radial-gradient(ellipse 55% 40% at 80% 18%, rgba(212,175,55,0.05), transparent 60%),
      linear-gradient(180deg, var(--black) 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.16) 42%, rgba(0,0,0,0.16) 58%, rgba(0,0,0,0.22) 78%, var(--black) 100%),
      url('../assets/hero/hero-ambient-1600.jpg');
    background-size:auto, cover, cover;
    background-position:center, center, center 45%;
    background-repeat:no-repeat, no-repeat, no-repeat;
  }
  .faq__intro{
    aspect-ratio:16/9;
    overflow:hidden;
    border:1px solid var(--ink-18);
    margin-bottom:clamp(48px,6vw,80px);
  }
  .faq__intro img{ width:100%; height:100%; object-fit:cover; object-position:center; }

  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .faq__list{ max-width:820px; border-top:1px solid var(--ink-18); }
  .faq__item{ border-bottom:1px solid var(--ink-18); }

  .faq__q{
    width:100%; background:none; border:none; color:var(--white);
    text-align:left; padding:27px 0; display:flex; justify-content:space-between; align-items:center;
    gap:20px; cursor:pointer; font-family:var(--font-body); font-size:16px; font-weight:400;
    transition:color 0.4s var(--ease-settle);
  }
  .faq__q:hover{ color:var(--gold); }
  .faq__q .plus{
    font-family:var(--font-display); color:var(--gold); font-size:18px; flex-shrink:0;
    transition:transform 0.5s var(--ease-settle);
  }
  .faq__item.is-open .faq__q .plus{ transform:rotate(45deg); }
  .faq__a{ max-height:0; overflow:hidden; transition:max-height 0.55s var(--ease-settle); }
  .faq__a p{ padding-bottom:27px; font-size:15px; max-width:60ch; }

  /* ============ CONTACTO ============ */
  .contacto{ background:var(--black); }
  .contacto__grid{ display:grid; grid-template-columns:1fr; gap:60px; }
  @media (min-width:960px){ .contacto__grid{ grid-template-columns:1fr 1fr; gap:100px; } }

  .contacto__info dl{ margin-top:36px; }
  .contacto__info dt{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-top:24px; }
  .contacto__info dd{ margin-top:6px; font-size:16px; color:var(--ink-70); }
  .contacto__value{
    color:var(--ink-70);
    border-bottom:1px solid transparent;
    transition:color 0.4s var(--ease-settle), border-color 0.4s var(--ease-settle);
  }
  .contacto__value:hover{ color:var(--gold); border-color:var(--gold-40); }

  /* ---------- social icons ---------- */
  .social-links{
    display:flex;
    gap:14px;
    margin-top:40px;
  }
  .social-links--footer{ margin-top:26px; }
  .social-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid var(--ink-35);
    border-radius:50%;
    color:var(--carbon);
    transition:border-color 0.4s var(--ease-settle), color 0.4s var(--ease-settle), background-color 0.4s var(--ease-settle), transform 0.4s var(--ease-settle);
  }
  .social-links a:hover{
    border-color:var(--gold-dark);
    color:var(--paper);
    background-color:var(--gold-dark);
    transform:translateY(-2px);
  }
  .social-links svg{ width:16px; height:16px; }

  /* Footer: fondo oscuro, necesita el tratamiento inverso al de Contacto.
     Especificidad reforzada (.footer__col .social-links--footer a) porque
     .footer__col a también alcanza estos mismos enlaces por anidamiento. */
  .footer__col .social-links--footer a{
    border-color:rgba(250,249,246,.34);
    color:rgba(250,249,246,.88);
  }
  .footer__col .social-links--footer a:hover{
    border-color:var(--gold);
    color:var(--black);
    background-color:var(--gold);
  }

  form{ display:flex; flex-direction:column; gap:28px; }
  /* ---------- Brevo: formulario de contacto embebido ---------- */
  .brevo-embed{ width:100%; }
  .brevo-embed .eyebrow{ margin-bottom:22px; }

  .brevo-embed__frame{
    --brevo-h: 700px;
    position:relative;
    width:100%;
    max-width:100%;
    overflow:hidden;
    border:1px solid var(--ink-18);
    background:var(--paper);
    padding:4px;
    box-sizing:border-box;
  }
  .brevo-embed__frame iframe{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:var(--brevo-h);
    border:none;
  }

  /* Brevo apila los campos en columna en pantallas angostas, por lo
     que necesita más alto; en desktop el formulario es más compacto. */
  @media (max-width:700px){
    .brevo-embed__frame{ --brevo-h: 920px; }
  }
  @media (min-width:701px) and (max-width:959px){
    .brevo-embed__frame{ --brevo-h: 800px; }
  }
  @media (min-width:960px){
    .brevo-embed__frame{ --brevo-h: 700px; }
  }

  .field{ position:relative; }
  .field label{
    display:block; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--ink-50); margin-bottom:10px;
    transition:color 0.4s var(--ease-settle);
  }
  .field input, .field textarea{
    width:100%; background:transparent; border:none;
    border-bottom:1px solid var(--ink-18);
    color:var(--white); font-family:var(--font-body); font-size:16px;
    padding:11px 0; transition:border-color 0.4s var(--ease-settle); resize:none;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--gold); outline:none; }
  .field:focus-within label{ color:var(--gold); }
  .field textarea{ min-height:110px; }
  .form__submit{ margin-top:12px; align-self:flex-start; }
  .form__submit[disabled]{ opacity:0.5; cursor:not-allowed; pointer-events:none; }

  .form__status{
    margin-top:18px;
    padding:16px 18px;
    font-size:14px;
    line-height:1.6;
    font-weight:300;
    border:1px solid var(--gold-40);
    background:var(--gold-12);
    color:var(--ink-90);
  }
  .form__status[data-state="error"]{
    border-color:var(--ink-18);
    background:var(--ink-08);
    color:var(--ink-90);
  }

  /* ============ FOOTER ============ */
  footer{ border-top:1px solid var(--ink-18); padding:68px 0 40px; }
  .footer__top{ display:grid; grid-template-columns:1fr; gap:48px; margin-bottom:56px; }
  @media (min-width:900px){ .footer__top{ grid-template-columns:1.4fr 1fr 1fr; } }

  .footer__top > div:first-child{
    width:min(100%, 360px);
    margin-inline:auto;
    text-align:center;
  }
  .footer__logo{ display:block; width:100%; line-height:0; }
  .footer__logo img{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    object-fit:contain;
    background:transparent;
  }
  .footer__tag{
    width:100%;
    max-width:none;
    margin-top:20px;
    color:var(--ink-50);
    font-family:var(--font-display);
    font-size:clamp(13px, 1.18vw, 15px);
    letter-spacing:0.105em;
    white-space:nowrap;
    text-align:center;
  }
  @media (max-width:420px){
    .footer__top > div:first-child{ width:min(100%, 330px); }
    .footer__tag{ font-size:12.5px; letter-spacing:0.075em; }
  }

  .footer__col h5{
    font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);
    margin-bottom:20px; font-weight:500; font-family:var(--font-body);
  }
  .footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
  .footer__col a{
    font-size:14.5px;
    color:rgba(250,249,246,.92);
    transition:color 0.3s var(--ease-settle);
  }
  .footer__col a:visited{ color:rgba(250,249,246,.92); }
  .footer__col a:hover,
  .footer__col a:focus,
  .footer__col a:active{ color:var(--gold); }

  .footer__bottom{
    display:flex; flex-direction:column; gap:16px; padding-top:32px;
    border-top:1px solid var(--ink-08); font-size:12.5px; color:var(--ink-35);
  }
  @media (min-width:700px){ .footer__bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }

  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--gold); color:var(--black);
    padding:12px 20px; z-index:2000; font-size:13px;
  }
  .skip-link:focus{ left:16px; top:16px; }

/* ============================================================
   MIGRACIÓN CROMÁTICA ORIGEN — LUJO HUMANO
   Blanco Humo dominante · Verde Oliva · Dorado Mate · Negro Profundo
   La estructura y la experiencia permanecen intactas.
   ============================================================ */
:root{
  --black:#0D0D10;
  --carbon:#1A1A20;
  --white:#F2F2F2;
  --smoke:#F2F2F2;
  --smoke-warm:#EAE7DF;
  --paper:#FAF9F6;
  --olive:#667047;
  --olive-dark:#465034;
  --olive-soft:#DDE1D2;
  --gold:#C6A15B;
  --gold-dark:#9A7838;

  /* Tintas para superficies claras */
  --ink-90:rgba(13,13,16,.90);
  --ink-70:rgba(13,13,16,.70);
  --ink-50:rgba(13,13,16,.50);
  --ink-35:rgba(13,13,16,.35);
  --ink-18:rgba(13,13,16,.14);
  --ink-08:rgba(13,13,16,.07);

  --gold-40:rgba(198,161,91,.42);
  --gold-22:rgba(198,161,91,.24);
  --gold-12:rgba(198,161,91,.13);
  --olive-18:rgba(102,112,71,.18);
  --olive-10:rgba(102,112,71,.10);
}

body{
  background:var(--smoke);
  color:var(--black);
}

::selection{background:var(--olive);color:var(--paper);}

/* Navegación: transparente sobre el hero, clara al desplazarse */
.nav.is-scrolled{
  background:rgba(242,242,242,.92);
  border-bottom-color:var(--gold-22);
  box-shadow:0 10px 32px rgba(13,13,16,.06);
}
.nav.is-scrolled .nav__links a,
.nav.is-scrolled .lang-switch__btn,
.nav.is-scrolled .nav__toggle{
  color:var(--black);
}
.nav.is-scrolled .nav__links a.is-active{color:var(--olive-dark);}
.nav.is-scrolled .nav__toggle span{background:var(--black);}
.nav__dropdown{
  background:rgba(250,249,246,.98);
  border-color:var(--gold-22);
  box-shadow:0 24px 48px rgba(13,13,16,.12);
}
.nav__dropdown a{color:var(--ink-70);}
.nav__dropdown a:hover,
.nav__dropdown a.is-active{color:var(--olive-dark);background:var(--olive-10);}

/* Hero: se conserva cinematográfico y con contraste alto */
.hero{background:var(--black);color:var(--paper);}
.hero__scrim{
  background:
    linear-gradient(90deg,rgba(13,13,16,.78) 0%,rgba(13,13,16,.47) 42%,rgba(13,13,16,.08) 78%),
    linear-gradient(180deg,rgba(13,13,16,.30) 0%,rgba(13,13,16,.06) 30%,rgba(13,13,16,.72) 100%);
}
.hero h1,.hero__sub,.hero .btn,.hero .btn-ghost{color:var(--paper);}
.hero__sub{color:rgba(250,249,246,.78);}
.hero .eyebrow{color:var(--gold);}
.hero .btn{border-color:var(--gold);}
.hero .btn:hover{color:var(--black);}
.hero .btn-ghost{border-color:rgba(250,249,246,.38);}
.hero .btn-ghost:hover{color:var(--black);border-color:var(--paper);}

/* Ritmo editorial claro */
.interlude{
  background:var(--olive-dark);
  color:var(--paper);
}
.interlude p{color:rgba(250,249,246,.88);}
.interlude .mark-dot{background:var(--gold);}

.historia,
.servicios,
.metodo,
.experiencias,
.community,
.portafolio,
.proceso,
.testimonios,
.faq,
.contacto{
  color:var(--black);
}

.historia,
.metodo,
.community,
.proceso,
.faq{
  background:var(--smoke);
}
.servicios,
.experiencias,
.portafolio,
.testimonios,
.contacto{
  background:var(--paper);
}

/* Texto y títulos sobre fondos claros */
.historia h2,.historia h3,
.servicios h2,.servicios h3,
.metodo h2,.metodo h3,
.experiencias h2,.experiencias h3,
.community h2,.community h3,
.portafolio h2,.portafolio h3,
.proceso h2,.proceso h3,.proceso h4,
.testimonios h2,.testimonios h3,
.faq h2,.faq h3,
.contacto h2,.contacto h3{
  color:var(--black);
}

/* Dorado controlado y verde como señal de confianza */
.eyebrow{color:var(--olive-dark);}
.eyebrow::before{background:var(--gold);}
.gold{color:var(--gold-dark);}

/* Botones claros */
:not(.hero) > .btn,
.contacto .btn,
.historia .btn,
.servicios .btn,
.metodo .btn,
.experiencias .btn,
.community .btn,
.portafolio .btn,
.proceso .btn,
.testimonios .btn,
.faq .btn{
  color:var(--olive-dark);
  border-color:var(--olive);
}
.contacto .btn::before,
.historia .btn::before,
.servicios .btn::before,
.metodo .btn::before,
.experiencias .btn::before,
.community .btn::before,
.portafolio .btn::before,
.proceso .btn::before,
.testimonios .btn::before,
.faq .btn::before{background:var(--olive);}
.contacto .btn:hover,
.historia .btn:hover,
.servicios .btn:hover,
.metodo .btn:hover,
.experiencias .btn:hover,
.community .btn:hover,
.portafolio .btn:hover,
.proceso .btn:hover,
.testimonios .btn:hover,
.faq .btn:hover{color:var(--paper);}

/* Historia */
.historia__quote{color:var(--black);}
.historia__signature{color:var(--olive-dark);}
.historia__signatureName{color:var(--black);}
.historia__body p{color:var(--ink-70);}
.historia__body p:first-of-type::first-letter{color:var(--gold-dark);}
.historia__link{color:var(--olive-dark);border-bottom-color:var(--gold-22);}
.historia__link:hover{color:var(--gold-dark);border-bottom-color:var(--gold);}

/* Servicios */
.servicios__list{border-top-color:var(--ink-18);}
.servicio{border-bottom-color:var(--ink-18);}
.servicio::before{background:var(--olive);}
.servicio__index{color:var(--gold-dark);}
.servicio__name{color:var(--black);}
.servicio__desc{color:var(--ink-70);}

.servicio-row{border-bottom-color:var(--ink-18);}
.servicio-row__index{color:var(--gold-dark);}
.servicio-row__name{color:var(--black);}
.servicio-row__desc{color:var(--ink-70);}

/* Método */
.metodo__list::before{background:linear-gradient(var(--gold-22),var(--olive-18),var(--gold-22));}
.metodo__num{color:var(--olive);border-color:var(--gold-22);}
.metodo__step:hover .metodo__num{color:var(--paper);background:var(--olive);border-color:var(--olive);}
.metodo__body h3{color:var(--black);}
.metodo__body p{color:var(--ink-70);}

/* Experiencias */
.experiencias__grid{border-top-color:var(--ink-18);}
.experiencias__col h3{color:var(--olive-dark);}
.experiencias__list{border-top-color:var(--ink-18);}
.experiencias__list li{border-bottom-color:var(--ink-18);}
.experiencias__name{color:var(--black);}
.experiencias__desc,.experiencias__visionLede{color:var(--ink-70);}
.experiencias__tags li{color:var(--ink-70);border-color:var(--ink-18);background:var(--smoke);}
.experiencias__tags li:hover{color:var(--olive-dark);border-color:var(--olive);background:var(--olive-soft);}
.experiencias__close{color:var(--olive-dark);border-color:var(--gold-22);}

/* Comunidad */
.community__grid{border-color:var(--ink-18);}
.community__item{border-color:var(--ink-18);}
.community__item:hover{background:var(--olive-soft);}
.community__item h3{color:var(--olive-dark);}
.community__item p{color:var(--ink-70);}
.community__item__body h3{color:var(--olive-dark);}
.community__item__body p{color:var(--ink-70);}
.community__impact{border-color:var(--gold-22);background:var(--paper);}
.community__impact p{color:var(--black);}
.community__close{color:var(--olive-dark);}

/* Portafolio */
.portafolio__list{border-bottom-color:var(--ink-18);}
.proyecto{border-top-color:var(--ink-18);}
.proyecto__frame{background:linear-gradient(135deg,var(--olive-soft),var(--smoke) 58%,var(--smoke-warm));}
.proyecto__placeholder{color:var(--olive-dark);}
.proyecto__frame::after{border-color:var(--gold-22);}
.proyecto__info .index,.proyecto__info .cat{color:var(--olive-dark);}
.proyecto__info .name{color:var(--black);}
.proyecto__info .blurb{color:var(--ink-70);}
.proyecto__info .link{color:var(--olive-dark);border-bottom-color:var(--gold-22);}

/* Proceso */
.proceso__track{border-color:var(--ink-18);}
.proceso__stage{border-color:var(--ink-18);}
.proceso__stage:hover{background:var(--olive-soft);}
.proceso__stageNum{color:var(--gold-dark);border-color:var(--gold-22);}
.proceso__stage h4{color:var(--carbon);}
.proceso__stage p{color:var(--ink-70);}

/* Testimonios */
.testimonio{border-color:var(--gold-22);background:var(--smoke);}
.testimonio blockquote{color:var(--black);}
.testimonio cite{color:var(--olive-dark);}

/* FAQ */
.faq__list{border-top-color:var(--ink-18);}
.faq__item{border-bottom-color:var(--ink-18);}
.faq__q{color:var(--black);}
.faq__q:hover{color:var(--olive-dark);}
.faq__q .plus{color:var(--gold-dark);}
.faq__a p{color:var(--ink-70);}

/* Contacto */
.contacto dl{border-top-color:var(--ink-18);}
.contacto dt{color:var(--olive-dark);}
.contacto dd,.contacto__value{color:var(--black);}
.field label{color:var(--olive-dark);}
.field input,.field textarea{
  color:var(--black);
  border-bottom-color:var(--ink-18);
}
.field input:focus,.field textarea:focus{border-bottom-color:var(--olive);}

/* Footer: cierre oscuro, cálido y premium */
footer{
  background:var(--black);
  color:var(--paper);
}
footer p,footer li,footer a{color:rgba(250,249,246,.68);}
footer h5,.footer__tag{color:var(--gold);}
footer a:hover{color:var(--gold);}
footer .hairline{background:linear-gradient(90deg,transparent,var(--gold-22),transparent);}
.footer__bottom{color:rgba(250,249,246,.50);}

/* Menú móvil sobre fondo claro */
@media (max-width: 980px){
  .nav__links{
    background:rgba(250,249,246,.98);
    color:var(--black);
  }
  .nav__links a{color:var(--ink-70);}
  .nav__links a.is-active{color:var(--olive-dark);}
  .nav__dropdown{background:var(--smoke);box-shadow:none;}
  .nav__toggle.is-open span{background:var(--black);}
}

/* ============================================================
   AJUSTE FINAL HERO — LUJO HUMANO
   ============================================================ */
body{
  background:var(--paper, #FAF9F6);
}

.hero{
  min-height:100svh;
  justify-content:center;
  background:var(--paper, #FAF9F6);
  color:var(--carbon, #2B2B2B);
}
.hero__scene{
  background:var(--paper, #FAF9F6);
}
.hero__photo{
  object-fit:cover;
  object-position:center center;
}
.hero__scrim{
  background:
    linear-gradient(90deg,
      rgba(250,249,246,.98) 0%,
      rgba(250,249,246,.94) 24%,
      rgba(250,249,246,.72) 42%,
      rgba(250,249,246,.18) 62%,
      rgba(250,249,246,0) 78%);
}
.hero__content{
  padding:clamp(118px,14vh,170px) var(--gutter) clamp(60px,8vh,96px);
  max-width:760px;
}
.hero h1{
  color:var(--carbon, #2B2B2B);
  text-shadow:none;
}
.hero h1 em{color:var(--gold-dark, #B8860B);}
.hero__sub{
  color:rgba(43,43,43,.78);
  border-left-color:rgba(212,175,55,.48);
}
.hero .eyebrow{color:var(--gold-dark, #B8860B);}

/* Botón principal: negro profundo; el dorado solo despierta en hover */
.hero .btn:not(.btn-ghost){
  color:var(--paper, #FAF9F6);
  background:var(--black, #111111);
  border:1px solid var(--black, #111111);
  box-shadow:0 8px 22px rgba(13,13,16,.10);
  overflow:visible;
  transition:
    color .45s var(--ease-settle),
    border-color .45s var(--ease-settle),
    transform .45s var(--ease-settle),
    box-shadow .45s var(--ease-settle),
    background-color .45s var(--ease-settle);
}
.hero .btn:not(.btn-ghost)::before{display:none;}
.hero .btn:not(.btn-ghost):hover{
  color:var(--paper, #FAF9F6);
  background:var(--black, #111111);
  border-color:rgba(212,175,55,.72);
  transform:translateY(-2px);
  box-shadow:
    0 12px 28px rgba(13,13,16,.14),
    0 0 18px rgba(212,175,55,.16);
}

/* Botón secundario claro y editorial */
.hero .btn-ghost{
  color:var(--carbon, #2B2B2B);
  background:rgba(250,249,246,.86);
  border:1px solid rgba(43,43,43,.20);
  overflow:visible;
  transition:
    color .45s var(--ease-settle),
    border-color .45s var(--ease-settle),
    transform .45s var(--ease-settle),
    box-shadow .45s var(--ease-settle),
    background-color .45s var(--ease-settle);
}
.hero .btn-ghost::before{display:none;}
.hero .btn-ghost:hover{
  color:var(--carbon, #2B2B2B);
  background:var(--paper, #FAF9F6);
  border-color:rgba(212,175,55,.70);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(13,13,16,.09), 0 0 14px rgba(212,175,55,.10);
}

/* El indicador “Desplázate” y su línea desaparecen por completo */
.hero__foot,
.hero__scroll,
.hero__scroll .line{display:none !important;}

/* Navegación clara sobre el nuevo hero */
.nav:not(.is-scrolled) .nav__links a{color:rgba(43,43,43,.72);}
.nav:not(.is-scrolled) .nav__links a:hover,
.nav:not(.is-scrolled) .nav__links a.is-active{color:var(--carbon, #2B2B2B);}
.nav:not(.is-scrolled) .nav__caret{color:rgba(43,43,43,.48);}
.nav:not(.is-scrolled) .lang-switch__btn{color:rgba(43,43,43,.64);}
.nav:not(.is-scrolled) .lang-switch__btn[aria-pressed="true"]{color:var(--gold-dark, #B8860B);}

/* Submenú: Blanco Humo, legible y con iluminación dorada suave al pasar el cursor */
.nav__dropdown a{color:rgba(43,43,43,.72);}
.nav__dropdown a:hover,
.nav__dropdown a.is-active{
  color:var(--carbon, #2B2B2B);
  background:rgba(212,175,55,.09);
  box-shadow:inset 3px 0 0 rgba(212,175,55,.46);
}

@media (max-width:760px){
  .hero{min-height:100svh;}
  .hero__photo{object-position:68% center;}
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(250,249,246,.90) 0%,
      rgba(250,249,246,.82) 42%,
      rgba(250,249,246,.94) 78%,
      rgba(250,249,246,.98) 100%);
  }
  .hero__content{
    padding-top:128px;
    padding-bottom:56px;
  }
}