/* ─── TOKENS ─────────────────────────────────── */
    :root {
      --bg:       #F0EDE6;
      --surf:     #F8F5EF;
      --surf2:    #E4DED4;
      --dark:     #3D3935;
      --text:     #544F4B;
      --muted:    #968372;
      --faint:    #BAB2A8;
      --accent:   #EBB478;
      --accentdk: #A8672F;
      --blue:     #738595;
      --cream:    #EBE7DF;
      --border:   rgba(84,79,75,.1);
      --bordersub:rgba(84,79,75,.07);

      --round: 'Poppins', system-ui, sans-serif;
      --sans:  'Poppins', system-ui, sans-serif;

      --ease:    cubic-bezier(.4,0,.2,1);
      --easeout: cubic-bezier(0,0,.2,1);
      --spring:  cubic-bezier(.34,1.56,.64,1);
      --navh:    70px;
    }

    /* ─── RESET ──────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-weight: 400;
      line-height: 1.6;
      overflow-x: hidden;
      cursor: none;
    }
    a    { color: inherit; text-decoration: none; }
    button { background: none; border: none; font-family: inherit; cursor: none; }
    img  { display: block; width: 100%; height: 100%; object-fit: cover; }

    /* ─── CURSOR ─────────────────────────────────── */
    #cur {
      position: fixed; width: 8px; height: 8px;
      background: var(--accent); border-radius: 50%;
      pointer-events: none; z-index: 9999;
      transform: translate(-50%,-50%);
      transition: width .3s var(--ease), height .3s var(--ease), background .3s;
    }
    #cur-ring {
      position: fixed; width: 36px; height: 36px;
      border: 1.5px solid rgba(235,180,120,.5); border-radius: 50%;
      pointer-events: none; z-index: 9998;
      transform: translate(-50%,-50%);
      transition: width .4s var(--ease), height .4s var(--ease), border-color .3s;
    }
    body.hov #cur      { width: 4px; height: 4px; }
    body.hov #cur-ring { width: 54px; height: 54px; border-color: rgba(235,180,120,.9); }

    /* ─── LOGO SVG ───────────────────────────────── */
    /* The house icon: amber roof chevron + vertical bar, integrated with "cachas house" text */
    .logo-mark {
      display: inline-flex; align-items: flex-start;
      gap: 0; position: relative;
    }
    .logo-words {
      display: flex; flex-direction: column;
      gap: 0; line-height: 1;
    }
    .logo-row {
      display: flex; align-items: center; gap: 0;
    }
    .logo-text {
      font-family: var(--round);
      font-weight: 800;
      letter-spacing: -.01em;
    }
    .logo-icon-wrap {
      display: flex; flex-direction: column;
      align-items: center; position: relative;
    }
    /* The amber h-house icon used in the logo */
    .logo-icon {
      display: block; flex-shrink: 0;
    }

    /* ─── NAV ────────────────────────────────────── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0;
      height: var(--navh); z-index: 1000;
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 0 clamp(1.5rem,5vw,4rem);
      transition: background .4s, border-color .4s, backdrop-filter .4s;
      border-bottom: 1px solid transparent;
    }
    /* over dark hero: cream text */
    .nav { color: var(--cream); }
    .nav.on {
      background: rgba(240,237,230,.96);
      backdrop-filter: blur(20px);
      border-bottom-color: var(--bordersub);
      color: var(--text);
    }
    .nav-logo-link {
      display: flex; align-items: center;
      z-index: 1001;
    }
    .nav-logo-img {
      height: 38px; width: auto;
      transition: opacity .3s;
    }
    .nav-logo-dark { display: none; }
    .nav.on .nav-logo-light { display: none; }
    .nav.on .nav-logo-dark  { display: block; }

    .nav-links {
      display: flex; align-items: center;
      gap: 2.5rem; list-style: none;
    }
    .nav-links a {
      font-family: var(--sans); font-size: .75rem;
      font-weight: 500; letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(235,231,223,.7);
      transition: color .25s; position: relative;
    }
    .nav.on .nav-links a { color: var(--muted); }
    .nav-links a::after {
      content: ''; position: absolute;
      bottom: -4px; left: 0; width: 0; height: 1px;
      background: var(--accent); transition: width .3s var(--ease);
    }
    .nav-links a:hover { color: var(--cream); }
    .nav.on .nav-links a:hover { color: var(--text); }
    .nav-links a:hover::after { width: 100%; }
    .nav-cta {
      font-family: var(--sans); font-size: .72rem;
      font-weight: 500; letter-spacing: .1em;
      text-transform: uppercase;
      padding: .55rem 1.4rem;
      border: 1px solid rgba(235,180,120,.4);
      border-radius: 100px; color: var(--accent);
      transition: background .3s, color .3s, border-color .3s;
    }
    .nav-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); }
    .nav-burger {
      display: none; flex-direction: column;
      gap: 5px; z-index: 1001; padding: 4px;
    }
    .nav-burger span {
      display: block; width: 22px; height: 1.5px;
      background: currentColor; transition: transform .3s, opacity .3s;
    }
    .nav-burger.on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-burger.on span:nth-child(2) { opacity: 0; }
    .nav-burger.on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* ─── MOBILE MENU ────────────────────────────── */
    .mob-menu {
      position: fixed; inset: 0;
      background: var(--dark); z-index: 999;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 2rem;
      opacity: 0; pointer-events: none; transition: opacity .35s;
    }
    .mob-menu.on { opacity: 1; pointer-events: auto; }
    .mob-menu a {
      font-family: var(--round); font-size: clamp(2rem,6vw,3.5rem);
      font-weight: 800; color: rgba(235,231,223,.5);
      transition: color .25s; letter-spacing: -.01em;
    }
    .mob-menu a:hover { color: var(--cream); }

    /* ─── HERO ───────────────────────────────────── */
    .hero {
      position: relative; height: 100svh; min-height: 640px;
      display: flex; align-items: center;
      padding: var(--navh) clamp(1.5rem,7vw,7rem) 0;
      overflow: hidden; background: #100d09;
    }
    /* Parallax photo layers */
    .hpx-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .hpx-layer {
      position: absolute; inset: -15%;
      will-change: transform;
    }
    .hpx-layer img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .hpx-layer-1 img {
      filter: saturate(.75) brightness(.55);
    }
    .hpx-layer-2 img {
      filter: saturate(.5) brightness(.32);
      opacity: .7;
    }
    .hpx-overlay {
      position: absolute; inset: 0;
      background:
        linear-gradient(to right,  rgba(10,8,6,.70) 0%, rgba(10,8,6,.22) 50%, rgba(10,8,6,.55) 100%),
        linear-gradient(to bottom, rgba(10,8,6,.55) 0%, rgba(10,8,6,.0) 40%, rgba(10,8,6,.65) 100%);
    }
    /* Subtle warm grain on hero */
    .hero::before {
      content: '';
      position: absolute; inset: 0; z-index: 2;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
      opacity: .7; mix-blend-mode: overlay; pointer-events: none;
    }
    /* Radial warm glow */
    .hero::after {
      content: '';
      position: absolute; top: 0; right: 0;
      width: 60%; height: 100%; z-index: 2;
      background: radial-gradient(ellipse at 75% 40%, rgba(235,180,120,.11) 0%, transparent 60%);
      pointer-events: none;
    }
    /* Vignette bottom */
    .hero-vignette {
      position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
      background: linear-gradient(to top, rgba(10,8,6,.9) 0%, transparent 100%);
      z-index: 1; pointer-events: none;
    }
    .hero-inner {
      position: relative; z-index: 3;
      display: grid; grid-template-columns: 1fr auto;
      align-items: center; gap: 3rem; width: 100%;
    }
    .hero-scroll { z-index: 3; }
    .hero-left { display: flex; flex-direction: column; gap: 2rem; }

    /* Big hero logo */
    .hero-logo {
      opacity: 0;
      animation: fadeup .9s var(--easeout) .4s forwards;
    }
    .hero-logo-img {
      width: clamp(260px, 48vw, 560px);
      height: auto; display: block;
      filter: drop-shadow(0 4px 24px rgba(0,0,0,.25));
    }
    .hero-logo-sub {
      font-family: var(--sans); font-size: clamp(.7rem,1.1vw,.9rem);
      font-weight: 300; letter-spacing: .35em;
      text-transform: uppercase;
      color: rgba(235,231,223,.35); margin-top: .875rem;
    }

    .hero-tagline {
      opacity: 0; transform: translateY(18px);
      animation: fadeup .8s var(--easeout) .8s forwards;
    }
    .hero-tagline-text {
      font-family: var(--round); font-weight: 700;
      font-style: italic;
      font-size: clamp(1rem,2vw,1.4rem);
      color: var(--accent); letter-spacing: .02em;
    }
    .hero-tagline-bar {
      width: 40px; height: 2px;
      background: var(--accent); margin-top: .6rem;
    }

    .hero-desc {
      display: flex; flex-direction: column; gap: 1rem;
      width: 100%;
      opacity: 0; transform: translateY(18px);
      animation: fadeup .8s var(--easeout) 1s forwards;
    }
    .hero-desc-main {
      font-family: var(--round);
      font-size: clamp(1.45rem,2.8vw,2.2rem); font-weight: 700;
      color: rgba(235,231,223,.92); line-height: 1.35;
      letter-spacing: -.02em;
    }
    .hero-desc-sub {
      font-size: clamp(.9rem,1.3vw,1rem); font-weight: 300;
      color: rgba(235,231,223,.45); line-height: 1.85;
      letter-spacing: .01em; max-width: 420px;
    }
    .hero-services {
      list-style: none; display: flex; flex-direction: column; gap: .45rem;
      opacity: 0; transform: translateY(18px);
      animation: fadeup .8s var(--easeout) 1.08s forwards;
    }
    .hero-services li {
      font-size: clamp(.78rem,1.1vw,.85rem); font-weight: 300;
      color: rgba(235,231,223,.5); padding-left: 1rem; position: relative;
    }
    .hero-services li::before {
      content: '·'; position: absolute; left: 0;
      color: var(--accent); font-weight: 700;
    }
    .hero-acts {
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
      opacity: 0; transform: translateY(18px);
      animation: fadeup .8s var(--easeout) 1.2s forwards;
    }

    /* Hero right — image showcase */
    .hero-imgshow {
      position: relative; flex-shrink: 0;
      opacity: 0; animation: fadeup 1s var(--easeout) .9s forwards;
    }
    .hero-imgshow::before,
    .hero-imgshow::after {
      content: ''; position: absolute; inset: 0;
      border-radius: 22px; pointer-events: none;
    }
    .hero-imgshow::before {
      transform: rotate(4deg) translate(10px, 8px);
      background: rgba(235,180,120,.13); z-index: 0;
    }
    .hero-imgshow::after {
      transform: rotate(-2.5deg) translate(-8px, 5px);
      background: rgba(84,79,75,.22); z-index: 0;
    }
    .hero-imgshow-card {
      position: relative; width: 270px; aspect-ratio: 3/4;
      border-radius: 22px; overflow: hidden; z-index: 1;
      box-shadow: 0 28px 72px rgba(0,0,0,.45);
    }
    .hero-imgshow-slide {
      position: absolute; inset: 0;
      opacity: 0; transition: opacity 1.4s ease;
    }
    .hero-imgshow-slide.on { opacity: 1; }
    .hero-imgshow-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .hero-imgshow-foot {
      position: absolute; bottom: 0; inset-x: 0;
      padding: 2.5rem 1.1rem 1.1rem;
      background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
      z-index: 2; pointer-events: none; left: 0; right: 0;
    }
    .hero-imgshow-label {
      font-family: var(--sans); font-size: .55rem; font-weight: 600;
      letter-spacing: .18em; text-transform: uppercase;
      color: rgba(240,237,230,.55);
    }
    .hero-imgshow-dots {
      display: flex; gap: .35rem; margin-top: .75rem; position: relative; z-index: 2;
      padding: 0 1.1rem 1.1rem;
    }
    .hero-imgshow-dot {
      height: 3px; border-radius: 2px;
      background: rgba(235,231,223,.2); transition: all .4s;
      flex: 1; max-width: 28px;
    }
    .hero-imgshow-dot.on { background: var(--accent); max-width: 40px; }

    /* Scroll indicator */
    .hero-scroll {
      position: absolute; bottom: 2rem; left: 50%;
      transform: translateX(-50%); z-index: 1;
      display: flex; flex-direction: column;
      align-items: center; gap: .4rem;
      opacity: 0; animation: fadeup .8s var(--easeout) 1.4s forwards;
    }
    .hero-scroll-text {
      font-size: .58rem; letter-spacing: .22em;
      text-transform: uppercase; color: rgba(235,231,223,.3);
    }
    .hero-scroll-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      animation: bounce 1.8s ease-in-out infinite;
    }

    /* ─── MARQUEE ────────────────────────────────── */
    .marquee {
      background: var(--accent); overflow: hidden;
      padding: .7rem 0;
    }
    .marquee-track {
      display: flex; gap: 2rem;
      animation: scroll 20s linear infinite;
      width: max-content; white-space: nowrap;
    }
    .marquee-track span {
      font-family: var(--round); font-size: .7rem;
      font-weight: 700; letter-spacing: .15em;
      text-transform: uppercase; color: var(--dark);
    }
    .marquee-track .dot { color: rgba(61,57,53,.4); }

    /* ─── BUTTONS ────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: .5rem;
      font-family: var(--sans); font-size: .72rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      padding: .875rem 1.875rem; border-radius: 100px;
      transition: all .3s var(--ease); position: relative;
    }
    .btn-primary {
      background: var(--accent); color: var(--dark);
      border: 2px solid var(--accent);
    }
    .btn-primary:hover {
      background: var(--accentdk); border-color: var(--accentdk);
      color: var(--cream);
    }
    .btn-ghost {
      border: 2px solid rgba(235,231,223,.25); color: rgba(235,231,223,.7);
    }
    .btn-ghost:hover {
      border-color: rgba(235,231,223,.6); color: var(--cream);
    }
    .btn-outline {
      border: 2px solid var(--border); color: var(--muted);
      border-radius: 100px;
    }
    .btn-outline:hover { border-color: var(--accent); color: var(--accentdk); }
    .btn-dark {
      background: var(--dark); color: var(--cream);
      border: 2px solid var(--dark);
    }
    .btn-dark:hover { background: var(--text); border-color: var(--text); }

    /* ─── SECTION COMMONS ────────────────────────── */
    .s-label {
      display: inline-flex; align-items: center; gap: .75rem;
      font-family: var(--sans); font-size: .62rem; font-weight: 600;
      letter-spacing: .28em; text-transform: uppercase;
      color: var(--accentdk); margin-bottom: .75rem;
    }
    .s-label::before {
      content: ''; flex-shrink: 0;
      width: 24px; height: 2px;
      background: var(--accent); border-radius: 1px;
    }
    /* sobre fondos oscuros */
    .contact .s-label,
    .stats  .s-label { color: rgba(235,180,120,.85); }
    .s-title {
      font-family: var(--round); font-size: clamp(2.2rem,5vw,4rem);
      font-weight: 800; line-height: 1.08;
      letter-spacing: -.02em; color: var(--dark);
    }
    .s-title em { font-style: italic; color: var(--accent); }
    .s-title-light { color: var(--cream); }
    .s-title-light em { color: var(--accent); }

    /* ─── REVEAL ─────────────────────────────────── */
    .rev {
      opacity: 0; transform: translateY(24px);
      transition: opacity .75s var(--easeout), transform .75s var(--easeout);
    }
    .rev.in { opacity: 1; transform: none; }
    .rev[data-d="1"] { transition-delay: .1s; }
    .rev[data-d="2"] { transition-delay: .2s; }
    .rev[data-d="3"] { transition-delay: .3s; }
    .rev[data-d="4"] { transition-delay: .4s; }
    .rev[data-d="5"] { transition-delay: .5s; }

    /* ─── INTRO STRIP ────────────────────────────── */
    .intro {
      padding: clamp(3.5rem,6vw,6rem) clamp(1.5rem,5vw,4rem);
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(2rem,5vw,5rem); align-items: center;
      border-bottom: 1px solid var(--bordersub);
    }
    .intro-quote {
      font-family: var(--round); font-weight: 700;
      font-size: clamp(1.4rem,2.8vw,2.2rem);
      line-height: 1.3; color: var(--dark);
      letter-spacing: -.01em;
    }
    .intro-quote em { font-style: italic; color: var(--accent); }
    .intro-body {
      font-size: clamp(.9rem,1.4vw,1rem); font-weight: 300;
      color: var(--muted); line-height: 1.85;
    }

    /* ─── GALLERY ────────────────────────────────── */
    .gallery {
      padding: clamp(3.5rem,7vw,7rem) clamp(1rem,4vw,4rem);
      background: var(--surf);
      position: relative;
    }

    /* ── KITCHEN ANIMATION INTRO ────────────────── */
    .gal-intro {
      position: absolute; inset: 0; z-index: 20;
      background: var(--surf);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 1.5rem;
      pointer-events: none;
      transition: opacity .8s ease;
    }
    .gal-intro.hidden { opacity: 0; pointer-events: none; }
    .gal-intro.gone   { display: none; }
    .ki-canvas {
      width: min(700px, 90vw); height: min(340px, 44vw);
      border-radius: 14px;
    }
    .ki-label {
      font-family: var(--sans); font-size: .72rem; font-weight: 500;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--muted); text-align: center;
    }
    .gallery-content {
      opacity: 0; transition: opacity .8s ease;
    }
    .gallery-content.visible { opacity: 1; }
    .gallery-head {
      margin-bottom: 2.5rem;
      display: flex; flex-direction: column; gap: 1rem;
    }
    .gallery-filters-wrap {
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none; margin-top: .25rem;
    }
    .gallery-filters-wrap::-webkit-scrollbar { display: none; }
    .gallery-filters { display: flex; flex-wrap: nowrap; gap: 2.25rem; padding-bottom: 2px; }
    .filt {
      font-family: var(--sans); font-size: .72rem; font-weight: 600;
      letter-spacing: .13em; text-transform: uppercase;
      padding: .4rem 0; background: none; border: none;
      border-bottom: 2px solid transparent;
      color: var(--faint);
      transition: color .3s, border-color .3s;
      white-space: nowrap; flex-shrink: 0;
    }
    .filt:hover { color: var(--text); }
    .filt.on { color: var(--accentdk); border-bottom-color: var(--accent); }

    /* ── GALLERY CAROUSEL ───────────────────────── */
    .gcar {
      position: relative; border-radius: 18px; overflow: hidden;
      box-shadow: 0 8px 40px rgba(84,79,75,.13);
      max-width: 960px; margin-left: auto; margin-right: auto;
    }
    .gcar-track {
      position: relative; width: 100%;
      aspect-ratio: 4/3; height: auto;
    }
    .gcar-slide {
      position: absolute; inset: 0;
      opacity: 0; transition: opacity .9s ease;
      cursor: pointer;
    }
    .gcar-slide.on { opacity: 1; z-index: 1; }
    .gcar-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* progress bar */
    .gcar-progress {
      position: absolute; top: 0; left: 0; right: 0;
      height: 3px; background: rgba(255,255,255,.1); z-index: 10;
    }
    .gcar-bar {
      height: 100%; width: 0%; background: var(--accent);
    }
    /* overlays */
    .gcar-chip {
      position: absolute; top: 1rem; left: 1rem;
      font-family: var(--sans); font-size: .54rem; font-weight: 600;
      letter-spacing: .14em; text-transform: uppercase;
      padding: .3rem .8rem; border-radius: 100px;
      background: rgba(20,18,16,.55); backdrop-filter: blur(8px);
      color: rgba(240,237,230,.85); z-index: 5; pointer-events: none;
    }
    .gcar-expand {
      position: absolute; top: 1rem; right: 1rem;
      width: 36px; height: 36px; border-radius: 4px;
      border: 1px solid rgba(240,237,230,.18);
      display: flex; align-items: center; justify-content: center;
      background: rgba(10,8,6,.38); backdrop-filter: blur(12px);
      z-index: 5; transition: background .25s, border-color .25s, transform .2s;
    }
    .gcar-expand:hover { background: rgba(235,180,120,.18); border-color: rgba(235,180,120,.55); transform: scale(1.08); }
    .gcar-expand svg { width: 13px; height: 13px; stroke: var(--cream); fill: none; }
    .gcar-counter { display: none; }
    /* prev/next — slim rectangular premium style */
    .gcar-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 44px; height: 68px; border-radius: 4px;
      border: 1px solid rgba(240,237,230,.15);
      display: flex; align-items: center; justify-content: center;
      background: rgba(10,8,6,.38); backdrop-filter: blur(12px);
      color: rgba(240,237,230,.6);
      transition: background .25s, border-color .25s, color .25s, transform .25s;
      z-index: 10;
    }
    .gcar-nav:hover {
      background: rgba(235,180,120,.18);
      border-color: rgba(235,180,120,.55);
      color: var(--accent);
      transform: translateY(-50%) scaleY(1.06);
    }
    .gcar-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
    .gcar-prev { left: 1rem; }
    .gcar-next { right: 1rem; }
    .gallery-more { display: flex; justify-content: center; margin-top: 2rem; }

    /* ─── ABOUT ──────────────────────────────────── */
    .about {
      padding: clamp(3.5rem,7vw,7rem) clamp(1.5rem,5vw,4rem);
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(3rem,6vw,6rem); align-items: center;
      border-top: 1px solid var(--bordersub);
    }
    .about-text { display: flex; flex-direction: column; gap: 1.5rem; }
    .about-body {
      font-size: clamp(.9rem,1.4vw,1rem); font-weight: 300;
      color: var(--muted); line-height: 1.9; max-width: 440px;
    }
    .about-sig {
      font-family: var(--round); font-weight: 700;
      font-style: italic; font-size: 1.2rem;
      color: var(--accent);
    }
    .about-visual { position: relative; }
    .about-main {
      aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;
      background: linear-gradient(145deg,#c9a06a,#8c5f2e,#6b3f18);
    }
    .about-accent {
      position: absolute; bottom: -2rem; left: -2rem;
      width: 50%; aspect-ratio: 1;
      border-radius: 12px; overflow: hidden;
      background: linear-gradient(130deg,#e8b878,#c07030);
      border: 5px solid var(--bg);
    }
    .about-badge {
      position: absolute; top: 1.5rem; right: -1.5rem;
      background: var(--dark); border-radius: 12px;
      padding: 1.1rem 1.4rem;
    }
    .about-badge-n {
      font-family: var(--round); font-size: 2.4rem;
      font-weight: 900; color: var(--accent); line-height: 1;
    }
    .about-badge-l {
      font-family: var(--sans); font-size: .62rem;
      letter-spacing: .15em; text-transform: uppercase;
      color: rgba(235,231,223,.5); margin-top: .25rem;
    }

    /* ─── STATS ──────────────────────────────────── */
    .stats {
      background: var(--dark);
      display: grid; grid-template-columns: repeat(3,1fr);
    }
    .stat {
      padding: clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
      border-right: 1px solid rgba(255,255,255,.06);
      display: flex; flex-direction: column; gap: .5rem;
      transition: background .3s;
    }
    .stat:hover { background: rgba(255,255,255,.03); }
    .stat:last-child { border-right: none; }
    .stat-n {
      font-family: var(--round); font-weight: 900;
      font-size: clamp(2.8rem,5vw,5rem);
      line-height: 1; color: var(--cream);
    }
    .stat-n b { color: var(--accent); }
    .stat-l {
      font-family: var(--sans); font-size: .7rem;
      letter-spacing: .12em; text-transform: uppercase;
      color: rgba(235,231,223,.4);
    }

    /* ─── PROCESS ────────────────────────────────── */
    .process {
      padding: clamp(3.5rem,7vw,7rem) clamp(1.5rem,5vw,4rem);
      background: var(--surf);
    }
    .process-head { margin-bottom: 3rem; }
    .process-grid {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 1.25rem;
    }
    .proc {
      background: var(--bg); padding: 2rem 1.625rem;
      border-radius: 16px; display: flex; flex-direction: column; gap: 1.125rem;
      border: 1.5px solid var(--bordersub);
      transition: border-color .3s, box-shadow .3s, transform .3s;
    }
    .proc:hover {
      border-color: var(--accent);
      box-shadow: 0 8px 28px rgba(235,180,120,.12);
      transform: translateY(-3px);
    }
    .proc-num {
      font-family: var(--round); font-size: 2.8rem;
      font-weight: 900; color: var(--surf2); line-height: 1;
    }
    .proc-ico {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(235,180,120,.12);
      display: flex; align-items: center; justify-content: center;
    }
    .proc-ico svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; }
    .proc-title {
      font-family: var(--round); font-size: 1.15rem;
      font-weight: 800; color: var(--dark); letter-spacing: -.01em;
    }
    .proc-desc {
      font-family: var(--sans); font-size: .85rem;
      font-weight: 300; color: var(--muted); line-height: 1.8;
    }

    /* ─── CONTACT ────────────────────────────────── */
    .contact {
      padding: clamp(3.5rem,7vw,7rem) clamp(1.5rem,5vw,4rem);
      background: var(--dark);
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(3rem,6vw,6rem); align-items: start;
    }
    .contact-info { display: flex; flex-direction: column; gap: 2rem; }
    .contact-details { display: flex; flex-direction: column; gap: 1.25rem; }
    .contact-row { display: flex; align-items: flex-start; gap: 1rem; }
    .contact-ico {
      width: 38px; height: 38px; flex-shrink: 0;
      border: 1.5px solid rgba(235,180,120,.2);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-top: 2px;
    }
    .contact-ico svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; }
    .contact-lbl {
      font-family: var(--sans); font-size: .6rem;
      letter-spacing: .15em; text-transform: uppercase;
      color: rgba(235,231,223,.3); margin-bottom: .2rem;
    }
    .contact-val { font-size: .9rem; color: rgba(235,231,223,.6); }
    .form { display: flex; flex-direction: column; gap: 1.125rem; }
    .form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
    .fg { display: flex; flex-direction: column; gap: .45rem; }
    .flbl {
      font-family: var(--sans); font-size: .6rem;
      letter-spacing: .15em; text-transform: uppercase;
      color: rgba(235,231,223,.4);
    }
    .fi, .fta, .fsel {
      width: 100%; background: rgba(255,255,255,.05);
      border: 1.5px solid rgba(255,255,255,.08);
      border-radius: 10px; padding: .8rem 1rem;
      font-family: var(--sans); font-size: .9rem;
      color: var(--cream); transition: border-color .25s;
      outline: none; appearance: none;
    }
    .fi::placeholder, .fta::placeholder { color: rgba(235,231,223,.2); }
    .fi:focus, .fta:focus, .fsel:focus { border-color: var(--accent); }
    .fta { resize: vertical; min-height: 110px; }
    .fsel option { background: var(--dark); color: var(--cream); }

    /* ─── FOOTER ─────────────────────────────────── */
    .footer {
      background: #2E2B28;
      padding: clamp(1.5rem,3vw,2.25rem) clamp(1.5rem,5vw,4rem);
      border-top: 1px solid rgba(255,255,255,.04);
      display: flex; align-items: center;
      justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    }
    .footer-logo-img {
      height: 38px; width: auto; object-fit: contain;
      opacity: .75;
    }
    .footer-copy { font-size: .68rem; color: rgba(235,231,223,.2); }
    .footer-links { display: flex; gap: 1.5rem; }
    .footer-links a {
      font-family: var(--sans); font-size: .68rem;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(235,231,223,.25); transition: color .25s;
    }
    .footer-links a:hover { color: var(--accent); }

    /* ─── LIGHTBOX ───────────────────────────────── */
    .lb {
      position: fixed; inset: 0; z-index: 2000;
      background: rgba(20,18,16,.96);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity .3s;
      backdrop-filter: blur(18px);
    }
    .lb.on { opacity: 1; pointer-events: auto; }
    .lb-close {
      position: absolute; top: 1.25rem; right: 1.25rem;
      width: 42px; height: 42px;
      border: 1.5px solid rgba(235,231,223,.15);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(235,231,223,.5); transition: all .25s; z-index: 10;
    }
    .lb-close:hover { border-color: var(--accent); color: var(--accent); }
    .lb-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
    .lb-box {
      max-width: min(86vw, 920px); max-height: 86vh;
      border-radius: 12px; overflow: hidden; position: relative;
    }
    .lb-img { max-width: 100%; max-height: 86vh; object-fit: contain; display: block; }
    .lb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 46px; height: 46px;
      border: 1.5px solid rgba(235,231,223,.15); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(235,231,223,.6); transition: all .25s; z-index: 10;
    }
    .lb-nav:hover { border-color: var(--accent); color: var(--accent); background: rgba(235,180,120,.08); }
    .lb-nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
    .lb-prev { right: calc(100% + 1.25rem); }
    .lb-next { left: calc(100% + 1.25rem); }
    .lb-counter {
      position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%);
      font-family: var(--sans); font-size: .62rem; letter-spacing: .14em;
      color: rgba(235,231,223,.28); white-space: nowrap;
    }

    /* ─── PROJECT TRACKING ──────────────────────────── */
    .tracking {
      padding: clamp(3.5rem,7vw,7rem) clamp(1.5rem,5vw,4rem);
      background: var(--surf);
      border-top: 1px solid var(--bordersub);
    }
    .trk-head { text-align: center; margin-bottom: 2.5rem; }
    .trk-search {
      max-width: 480px; margin: 2rem auto 0;
      display: flex; gap: .75rem;
    }
    .trk-input {
      flex: 1; background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 100px; padding: .8rem 1.5rem;
      font-family: var(--sans); font-size: .95rem;
      color: var(--text); outline: none;
      transition: border-color .25s;
      text-transform: uppercase; letter-spacing: .1em;
    }
    .trk-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--faint); }
    .trk-input:focus { border-color: var(--accent); }
    .trk-btn-search {
      padding: .8rem 1.75rem; border-radius: 100px;
      background: var(--accent); color: var(--dark);
      font-family: var(--sans); font-size: .72rem; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase;
      transition: background .25s, color .25s;
      cursor: pointer; border: none; white-space: nowrap;
    }
    .trk-btn-search:hover { background: var(--accentdk); color: var(--cream); }
    .trk-error {
      max-width: 480px; margin: 1.25rem auto 0;
      text-align: center; font-size: .82rem;
      color: #c0392b; display: none;
    }
    .trk-error.visible { display: block; }
    .trk-card {
      max-width: 700px; margin: 2.5rem auto 0;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 20px; padding: 2.25rem; display: none;
    }
    .trk-card.visible { display: block; }
    .trk-card-name {
      font-family: var(--round); font-size: 1.3rem; font-weight: 800;
      color: var(--dark); margin-bottom: .3rem;
    }
    .trk-card-client {
      font-size: .78rem; color: var(--muted);
      letter-spacing: .04em; margin-bottom: 2.25rem;
    }
    .trk-card-client span { color: var(--text); font-weight: 600; }
    .trk-steps {
      position: relative; display: flex;
      justify-content: space-between; align-items: flex-start;
    }
    .trk-steps::before {
      content: ''; position: absolute;
      top: 14px; left: 14px; right: 14px;
      height: 2px; background: var(--surf2); z-index: 0;
    }
    .trk-progress-line {
      position: absolute; top: 14px; left: 14px;
      height: 2px; background: var(--accent); z-index: 1;
      transition: width .7s cubic-bezier(.4,0,.2,1);
    }
    .trk-step {
      display: flex; flex-direction: column;
      align-items: center; gap: .55rem;
      position: relative; z-index: 2; flex: 1;
    }
    .trk-dot {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--surf2); border: 2.5px solid var(--surf2);
      display: flex; align-items: center; justify-content: center;
      transition: background .4s, border-color .4s, box-shadow .4s; flex-shrink: 0;
    }
    .trk-dot svg { width: 12px; height: 12px; stroke: white; fill: none; display: none; }
    .trk-step.done .trk-dot { background: var(--accent); border-color: var(--accent); }
    .trk-step.done .trk-dot svg { display: block; }
    .trk-step.active .trk-dot {
      background: var(--accent); border-color: var(--accent);
      box-shadow: 0 0 0 6px rgba(235,180,120,.22);
    }
    .trk-step.active .trk-dot svg { display: block; }
    .trk-step-label {
      font-family: var(--sans); font-size: .55rem;
      letter-spacing: .03em; text-align: center;
      color: var(--faint); line-height: 1.3; max-width: 72px;
    }
    .trk-step.done .trk-step-label { color: var(--muted); }
    .trk-step.active .trk-step-label { color: var(--accentdk); font-weight: 700; font-size: .6rem; }
    .trk-current-label {
      text-align: center; margin-top: 1.5rem;
      font-family: var(--sans); font-size: .72rem;
      letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    }
    .trk-current-label strong { color: var(--accentdk); font-weight: 700; }
    .trk-updated { text-align: right; font-size: .62rem; color: var(--faint); margin-top: 1.25rem; }
    .trk-admin-toggle {
      display: block; margin: 2.5rem auto 0;
      font-family: var(--sans); font-size: .62rem;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--faint); background: none; border: none;
      cursor: pointer; transition: color .2s;
    }
    .trk-admin-toggle:hover { color: var(--muted); }
    .trk-admin-panel { max-width: 920px; margin: 2rem auto 0; display: none; }
    .trk-admin-panel.visible { display: block; }
    .trk-admin-login {
      max-width: 340px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 1rem; align-items: stretch;
    }
    .trk-admin-login h3 {
      font-family: var(--round); font-weight: 800;
      color: var(--dark); font-size: 1.05rem; text-align: center;
    }
    .trk-admin-pw {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 10px; padding: .75rem 1rem;
      font-family: var(--sans); font-size: .9rem;
      color: var(--text); outline: none; transition: border-color .25s;
    }
    .trk-admin-pw:focus { border-color: var(--accent); }
    .trk-admin-err { font-size: .72rem; color: #c0392b; text-align: center; }
    .trk-admin-dash { display: none; }
    .trk-admin-dash.visible { display: block; }
    .trk-admin-top {
      display: flex; justify-content: space-between;
      align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem;
    }
    .trk-admin-title { font-family: var(--round); font-weight: 800; color: var(--dark); font-size: 1.05rem; }
    .trk-table-wrap {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 16px; overflow: auto;
    }
    .trk-table { width: 100%; border-collapse: collapse; min-width: 640px; }
    .trk-table th {
      text-align: left; font-family: var(--sans); font-size: .57rem;
      letter-spacing: .15em; text-transform: uppercase;
      color: var(--muted); padding: .9rem 1.1rem;
      border-bottom: 1.5px solid var(--border); font-weight: 600;
    }
    .trk-table td {
      padding: .8rem 1.1rem; border-bottom: 1px solid var(--bordersub);
      font-size: .82rem; color: var(--text); vertical-align: middle;
    }
    .trk-table tr:last-child td { border-bottom: none; }
    .trk-table tr:hover td { background: var(--surf); }
    .trk-code-chip {
      font-family: 'Courier New', monospace;
      background: var(--surf2); border-radius: 6px;
      padding: .2rem .65rem; font-size: .8rem;
      letter-spacing: .1em; color: var(--dark); font-weight: 700;
      cursor: pointer; transition: background .2s; white-space: nowrap;
    }
    .trk-code-chip:hover { background: var(--accent); }
    .trk-status-sel {
      background: var(--surf); border: 1.5px solid var(--border);
      border-radius: 8px; padding: .35rem .6rem;
      font-family: var(--sans); font-size: .78rem;
      color: var(--text); outline: none; cursor: pointer;
      transition: border-color .2s; max-width: 220px; width: 100%;
    }
    .trk-status-sel:focus { border-color: var(--accent); }
    .trk-table input[type="text"] {
      background: var(--surf); border: 1.5px solid var(--border);
      border-radius: 8px; padding: .35rem .6rem;
      font-family: var(--sans); font-size: .82rem;
      color: var(--text); outline: none; width: 100%; min-width: 110px;
      transition: border-color .2s;
    }
    .trk-table input[type="text"]:focus { border-color: var(--accent); }
    .trk-btn-del {
      background: none; border: 1.5px solid rgba(192,57,43,.25);
      border-radius: 8px; padding: .3rem .65rem;
      color: rgba(192,57,43,.5); font-size: .72rem;
      cursor: pointer; transition: all .2s; white-space: nowrap;
    }
    .trk-btn-del:hover { background: rgba(192,57,43,.07); border-color: rgba(192,57,43,.5); color: #c0392b; }
    .trk-btn-add {
      background: var(--accent); color: var(--dark);
      border: none; border-radius: 10px; padding: .65rem 1.4rem;
      font-family: var(--sans); font-size: .72rem; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase;
      cursor: pointer; transition: background .25s, color .25s;
    }
    .trk-btn-add:hover { background: var(--accentdk); color: var(--cream); }
    .trk-btn-logout {
      background: none; border: 1.5px solid var(--border);
      border-radius: 8px; padding: .5rem 1rem;
      font-family: var(--sans); font-size: .68rem;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--muted); cursor: pointer; transition: all .2s;
    }
    .trk-btn-logout:hover { border-color: var(--muted); color: var(--text); }
    .trk-empty { text-align: center; padding: 3rem; color: var(--faint); font-size: .85rem; }
    @media (max-width: 768px) {
      .trk-search { flex-direction: column; }
      .trk-btn-search { border-radius: 12px; }
      .trk-steps { flex-direction: column; align-items: flex-start; gap: .5rem; }
      .trk-steps::before, .trk-progress-line { display: none; }
      .trk-step { flex-direction: row; align-items: center; gap: .75rem; flex: none; width: 100%; }
      .trk-step-label { text-align: left; max-width: none; font-size: .72rem; }
      .trk-card { padding: 1.5rem; }
    }

    /* ─── KEYFRAMES ──────────────────────────────── */
    @keyframes fadeup {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes bounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(6px); }
    }

    /* ─── RESPONSIVE ─────────────────────────────── */
    @media (max-width: 1100px) {
      .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
      .hero-imgshow { display: none; }
      .intro { grid-template-columns: 1fr; gap: 1.5rem; }
      .about { grid-template-columns: 1fr; }
      .about-visual { order: -1; }
      .about-main { aspect-ratio: 16/9; }
      .about-accent { display: none; }
      .about-badge { right: 1rem; top: 1rem; }
      .process-grid { grid-template-columns: 1fr 1fr; }
      .contact { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      body { cursor: auto; }
      #cur, #cur-ring { display: none; }
      .nav-links, .nav-cta { display: none; }
      .nav-burger { display: flex; }

      /* Mobile hero: show real photo — hide second dark layer, lighten first */
      .hpx-layer-2 { display: none; }
      .hpx-layer-1 img { filter: saturate(.9) brightness(.72); }
      .hpx-overlay {
        background:
          linear-gradient(to right,  rgba(10,8,6,.50) 0%, rgba(10,8,6,.12) 60%, rgba(10,8,6,.35) 100%),
          linear-gradient(to bottom, rgba(10,8,6,.40) 0%, rgba(10,8,6,.0) 40%, rgba(10,8,6,.55) 100%);
      }

      .hero { padding-left: 1.5rem; padding-right: 1.5rem; align-items: center; }
      .hero-left { align-items: center; text-align: center; gap: 1.25rem; }
      .hero-logo-img { width: min(82vw, 340px); }
      .hero-logo-sub { letter-spacing: .18em; }
      .hero-tagline { display: flex; flex-direction: column; align-items: center; }
      .hero-tagline-bar { margin-top: .5rem; }
      .hero-desc { max-width: 100%; }
      .hero-acts { justify-content: center; flex-wrap: wrap; }
      .hero-scroll { left: 50%; transform: translateX(-50%); }

      .gcar-track { height: clamp(280px, 52vw, 420px); }
      .gcar-nav { width: 38px; height: 38px; }
      .gcar-nav svg { width: 15px; height: 15px; }
      .lb-prev { right: auto; left: .75rem; }
      .lb-next { left: auto; right: .75rem; }
      .lb-nav { background: rgba(20,18,16,.6); backdrop-filter: blur(8px); }

      .stats { grid-template-columns: 1fr; }
      .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
      .stat:last-child { border-bottom: none; }
      .process-grid { grid-template-columns: 1fr; }
      .footer { flex-direction: column; text-align: center; }
      .footer-links { justify-content: center; }
    }

    @media (max-width: 480px) {
      .hero-left { gap: .875rem; }
      .hero-logo-img { width: min(88vw, 280px); }
      .form-row2 { grid-template-columns: 1fr; }
      .about-badge { display: none; }
      .nav-logo-img { height: 30px; }
      .btn { padding: .75rem 1.5rem; font-size: .68rem; }
      .lb-box { max-width: 94vw; max-height: 88vh; border-radius: 8px; }
      .lb-img { max-height: 88vh; }
      .lb-counter { bottom: -2rem; font-size: .58rem; }
      .gcar-track { height: 58vw; min-height: 240px; }
      .gcar-prev { left: .5rem; }
      .gcar-next { right: .5rem; }
    }

    /* ═══════════════ REDISEÑO 2026 · INICIO ═══════════════ */
    .page-top { padding-top: var(--navh); }

    /* Portada */
    .hero2 {
      display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
      gap: clamp(2rem, 5vw, 5rem); background: var(--bg);
      padding: calc(var(--navh) + clamp(2rem, 6vw, 4.5rem)) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
    }
    .hero2-kicker {
      display: inline-flex; align-items: center; gap: .75rem;
      font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accentdk);
    }
    .hero2-kicker::before { content: ''; width: 24px; height: 2px; background: var(--accent); }
    .hero2-title {
      font-family: var(--round); font-weight: 800; color: var(--dark);
      font-size: clamp(2.5rem, 5.6vw, 4.9rem); line-height: 1.03; letter-spacing: -.02em;
      margin: 1.1rem 0 1.4rem;
    }
    .hero2-title em { font-style: italic; color: var(--accent); }
    .hero2-text { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.75; color: var(--text); max-width: 34rem; }
    .hero2-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin: 2.1rem 0 1.6rem; }
    .hero2-link { font-weight: 600; font-size: .95rem; color: var(--dark); display: inline-flex; align-items: center; gap: .4rem; transition: gap .25s var(--ease), color .25s; }
    .hero2-link:hover { gap: .7rem; color: var(--accentdk); }
    .hero2-note { font-size: .85rem; line-height: 1.6; color: var(--muted); max-width: 32rem; }
    .hero2-photo { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 78vh; justify-self: end; width: 100%; box-shadow: 0 30px 70px rgba(61,57,53,.18); }
    .hero2-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

    /* Lo que hago */
    .offer { background: var(--surf); padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem); border-top: 1px solid var(--bordersub); }
    .offer-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
    .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
    .offer-card-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surf2); }
    .offer-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
    .offer-card:hover .offer-card-img img { transform: scale(1.04); }
    .offer-card h3 { font-family: var(--round); font-weight: 800; font-size: 1.3rem; color: var(--dark); margin: 1.1rem 0 .45rem; }
    .offer-card p { font-size: .95rem; line-height: 1.7; color: var(--muted); }

    /* Quién está detrás */
    .who { padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem); background: var(--bg); }
    .who-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
    .who-card { background: white; border-radius: 24px; padding: clamp(1rem, 2vw, 1.5rem); box-shadow: 0 24px 60px rgba(61,57,53,.12); border: 1px solid var(--bordersub); }
    .who-card img { border-radius: 14px; width: 100%; height: auto; }
    a.who-card { display: block; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
    a.who-card:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(61,57,53,.18); }
    .who-ig { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-weight: 600; font-size: .9rem; color: var(--accentdk); transition: gap .25s var(--ease); }
    a.who-card:hover .who-ig { gap: .7rem; }
    .who-body { font-size: 1rem; line-height: 1.8; color: var(--text); margin-top: 1.1rem; max-width: 36rem; }
    .who-quote {
      margin-top: 2rem; background: white; border: 1px solid var(--border); border-radius: 20px;
      padding: 1.5rem 1.75rem; max-width: 36rem; position: relative;
    }
    .who-quote::before { content: '“'; position: absolute; top: -.6rem; left: 1.2rem; font-size: 4rem; line-height: 1; color: var(--accent); font-family: Georgia, serif; }
    .who-quote p { font-size: 1.05rem; line-height: 1.65; color: var(--dark); font-style: italic; }
    .who-quote cite { display: block; margin-top: .8rem; font-style: normal; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

    /* Testimonios (carrete) */
    .testi { margin-top: clamp(3rem, 6vw, 4.5rem); }
    .testi-track {
      display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
      padding: .5rem 0 1rem; scrollbar-width: thin;
    }
    .testi-item { flex: 0 0 auto; height: 280px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: white; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(61,57,53,.08); cursor: zoom-in; }
    .testi-item img { height: 100%; width: auto; object-fit: contain; }
    .lb-simple { position: fixed; inset: 0; z-index: 2000; background: rgba(20,18,16,.92); display: none; align-items: center; justify-content: center; padding: 1.5rem; }
    .lb-simple.on { display: flex; }
    .lb-simple img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; }

    /* Páginas internas (galería / proceso) */
    .cta-band { background: var(--surf); border-top: 1px solid var(--bordersub); padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
    .cta-band .s-title { margin-bottom: 1.5rem; }

    @media (max-width: 900px) {
      .hero2 { grid-template-columns: 1fr; }
      .hero2-photo { justify-self: stretch; max-height: none; aspect-ratio: 4 / 5; }
      .offer-grid { grid-template-columns: 1fr; }
      .offer-card-img { aspect-ratio: 4 / 3; }
      .who-grid { grid-template-columns: 1fr; }
      .testi-item { height: 230px; }
    }