:root{
    --bg-0:#111521;
    --bg-1:#181d2b;
    --bg-2:#232938;

    --surface:#1f2433;
    --surface-2:#2b3244;

    --line:rgba(255,255,255,.12);
    --line-soft:rgba(255,255,255,.08);

    --ink:#faf7f2;
    --ink-dim:#d3cfca;
    --ink-faint:#9f9ca8;

    --gold:#F2BE72;
    --rose:#F29AA3;
    --cyan:#7ED7E6;

    --gradient:linear-gradient(135deg,#F2BE72,#F29AA3);
    --gradient-soft:linear-gradient(135deg,
        rgba(242,190,114,.18),
        rgba(242,154,163,.18));

    --radius:22px;

    --serif:"Cormorant Garamond", serif;
    --serif-sc:"Cormorant SC", serif;
    --sans:"Inter", sans-serif;
}

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-0);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* ---------- shared atoms ---------- */
  .lot-wrap{max-width:1220px;margin:0 auto;padding:0 32px;}
  .lot-eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--serif-sc);
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-dim);
    padding:8px 18px 8px 14px;
    border:1px solid var(--line);
    border-radius:100px;
    background:rgba(255, 255, 255, 0.52);
    backdrop-filter:blur(6px);
  }
  .lot-eyebrow::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--gradient);
    box-shadow:0 0 10px rgba(231,180,121,.7);
    flex:none;
  }
  .lot-h2{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(34px,4.4vw,56px);
    line-height:1.08;
    letter-spacing:-.01em;
    margin:22px 0 0;
  }
  .lot-h2 em{font-style:italic;font-weight:500;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .lot-btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--sans);font-weight:600;font-size:15px;
    padding:15px 26px;border-radius:100px;
    border:1px solid transparent;
    cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, filter .35s ease;
    white-space:nowrap;
  }
  .lot-btn--primary{
    background:var(--gradient);
    color:#1a1410;
    box-shadow:0 8px 24px -8px rgba(231,150,120,.55);
  }
  .lot-btn--primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 32px -10px rgba(231,150,120,.7);}
  .lot-btn--primary svg{transition:transform .35s cubic-bezier(.16,1,.3,1);}
  .lot-btn--primary:hover svg{transform:translateX(4px);}
  .lot-btn--ghost{
    background:rgba(255,255,255,.03);
    border-color:var(--line);
    color:var(--ink);
    backdrop-filter:blur(6px);
  }
  .lot-btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);transform:translateY(-2px);}

  /* reveal on scroll */
  .lot-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
  .lot-reveal.is-in{opacity:1;transform:translateY(0);}

  .lot-section-label{
    font-family:var(--serif-sc);
    font-size:14px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold);
    display:flex;align-items:center;gap:14px;
    margin-bottom:18px;
  }
  .lot-section-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);}

/* ================= HERO ================= */
.lot-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  padding:140px 0 96px;
  isolation:isolate;
}

/* Fondo en su propio contenedor recortado (no afecta al texto) */
.lot-hero__bg{
  position:absolute;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
}
.lot-hero__img{
  position:absolute;inset:0;z-index:-3;
  background-image:url('https://images.pexels.com/photos/9242212/pexels-photo-9242212.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size:cover;background-position:center 30%;
  filter:saturate(.75) brightness(.62);
  transform:scale(1.06);
}
.lot-hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 60% 55% at 18% 30%, rgba(231,180,121,.16), transparent 60%),
    linear-gradient(180deg, rgba(8,9,13,.55) 0%, rgba(9,10,15,.78) 46%, var(--bg-0) 96%),
    linear-gradient(90deg, rgba(8,9,13,.92) 0%, rgba(8,9,13,.55) 46%, rgba(8,9,13,.35) 100%);
}
.lot-hero__glow{
  position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(231,180,121,.22), transparent 70%);
  left:var(--gx,20%);top:var(--gy,20%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:left .5s ease, top .5s ease;
  filter:blur(10px);
}
.lot-hero__grid{
  position:absolute;inset:0;z-index:-1;opacity:.25;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg, black, transparent 75%);
          mask-image:linear-gradient(180deg, black, transparent 75%);
}

/* .lot-wrap ya trae su propio max-width en tu base, pero nos aseguramos
   de que SIEMPRE tenga aire lateral en pantallas chicas, aunque la clase
   global no lo traiga definido */
.lot-hero__body{
  position:relative;
  max-width:780px;
  width:100%;
  padding-top:4px;
  box-sizing:border-box;
}

.lot-eyebrow{
  display:inline-block;
  max-width:100%;
}

.lot-hero__title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(40px,7.6vw,104px);
  line-height:1.05;
  letter-spacing:-.015em;
  margin:26px 0 24px;
  overflow-wrap:break-word;
  word-break:break-word;
}
.lot-hero__title span{
  display:block;
  font-style:italic;
  color:var(--ink-dim);
  font-size:.5em;
  letter-spacing:.02em;
  margin:6px 0 2px;
  line-height:1.15;
}
.lot-hero__title i{
  font-style:italic;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lot-hero__desc{
  font-size:18px;line-height:1.7;color:var(--ink-dim);
  max-width:560px;
  width:100%;
  margin:0 0 38px;
  font-weight:400;
  box-sizing:border-box;
}

.lot-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:56px;
  width:100%;
}

/* Los botones (definidos en tu base como .lot-btn) deben poder achicarse
   o pasar a ancho completo en vez de desbordar el viewport */
.lot-hero__actions .lot-btn{
  max-width:100%;
  white-space:nowrap;
  flex-shrink:0;
}

.lot-ticker{
  position:relative;width:100%;max-width:900px;
  -webkit-mask-image:linear-gradient(90deg,transparent, black 8%, black 92%, transparent);
          mask-image:linear-gradient(90deg,transparent, black 8%, black 92%, transparent);
  overflow:hidden;
}
.lot-ticker__track{
  display:flex;gap:12px;width:max-content;
  animation:lot-scroll 26s linear infinite;
}
.lot-ticker:hover .lot-ticker__track{animation-play-state:paused;}
@keyframes lot-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.lot-tag{
  font-family:var(--serif-sc);
  font-size:13px;letter-spacing:.08em;
  color:var(--ink-dim);
  padding:9px 18px;border:1px solid var(--line);border-radius:100px;
  background:rgba(255,255,255,.02);
  white-space:nowrap;
  display:flex;align-items:center;gap:8px;
}
.lot-tag::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 900px){
  .lot-hero{ padding:120px 0 80px; }
}

/* Mobile: aquí estaba el problema real de la imagen — sin padding lateral
   el texto y los botones tocaban/salían del borde de la pantalla */
@media (max-width: 640px){
  .lot-hero{
    padding:110px 0 64px;
    align-items:flex-start;
  }

  /* Si .lot-wrap no trae padding propio en tu CSS base, esto lo garantiza */
  .lot-hero__body{
    padding-left:20px;
    padding-right:20px;
  }

  .lot-eyebrow{
    font-size:11px;
    padding:8px 14px;
    white-space:normal;
  }

  .lot-hero__title{
    font-size:clamp(34px,11vw,52px);
    margin:18px 0 16px;
  }

  .lot-hero__desc{
    font-size:16px;
    line-height:1.6;
    margin-bottom:28px;
  }

  /* Los botones pasan a ocupar todo el ancho disponible, uno debajo del
     otro, en vez de intentar caber en una sola fila y cortarse */
  .lot-hero__actions{
    flex-direction:column;
    gap:12px;
    margin-bottom:36px;
  }
  .lot-hero__actions .lot-btn{
    width:100%;
    justify-content:center;
    white-space:normal;
  }

  .lot-ticker{
    max-width:100%;
  }
  .lot-tag{
    font-size:11px;
    padding:7px 14px;
  }
}

@media (max-width: 380px){
  .lot-hero__title{ font-size:clamp(30px,12vw,44px); }
  .lot-hero__body{ padding-left:16px; padding-right:16px; }
}

  /* ================= PILLARS ================= */
  .lot-pillars{padding:130px 0 60px;}
  .lot-pillars__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:52px;}
  .lot-pillars__intro p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-dim);max-width:420px;margin:0;line-height:1.5;}

  .lot-pillars__grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  }
  .lot-card{
    position:relative;
    height:460px;border-radius:var(--radius);
    overflow:hidden;
    cursor:pointer;
    border:1px solid var(--line);
    transition:transform .55s cubic-bezier(.16,1,.3,1), border-color .55s ease;
  }
  .lot-card:hover, .lot-card.is-active{transform:translateY(-8px);border-color:rgba(231,180,121,.4);}
  .lot-card__img{
    position:absolute;inset:0;background-size:cover;background-position:center;
    filter:grayscale(.35) saturate(.8) brightness(.55);
    transform:scale(1.08);
    transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter .8s ease;
  }
  .lot-card:hover .lot-card__img, .lot-card.is-active .lot-card__img{transform:scale(1.16);filter:grayscale(.1) saturate(1) brightness(.4);}
  .lot-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,11,16,.15) 0%, rgba(10,11,16,.55) 55%, rgba(8,9,13,.94) 100%);}
  .lot-card__num{
    position:absolute;top:26px;left:28px;
    font-family:var(--serif);font-style:italic;font-size:16px;color:var(--gold);
    letter-spacing:.05em;
  }
  .lot-card__icon{
    position:absolute;top:24px;right:26px;
    width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
    display:flex;align-items:center;justify-content:center;
    background:rgba(10,11,16,.4);backdrop-filter:blur(4px);
    color:var(--ink);
  }
  .lot-card__icon svg{width:18px;height:18px;}
  .lot-card__content{position:absolute;left:0;right:0;bottom:0;padding:30px 28px 32px;}
  .lot-card__title{font-family:var(--serif);font-weight:500;font-size:27px;margin:0 0 10px;line-height:1.15;}
  .lot-card__text{
    font-size:14.5px;line-height:1.65;color:var(--ink-dim);margin:0;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .6s cubic-bezier(.16,1,.3,1), opacity .5s ease .05s;
  }
  .lot-card:hover .lot-card__text, .lot-card.is-active .lot-card__text{max-height:140px;opacity:1;}
  .lot-card__hint{
    font-family:var(--serif-sc);font-size:11.5px;letter-spacing:.1em;color:var(--ink-faint);
    display:flex;align-items:center;gap:6px;margin-top:12px;
    transition:opacity .4s ease;
  }
  .lot-card:hover .lot-card__hint, .lot-card.is-active .lot-card__hint{opacity:0;height:0;margin:0;}

  /* ================= INTRO / BLEED ================= */
  .lot-bleed{padding:130px 0;position:relative;}
  .lot-bleed__grid{
    display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;
  }
  .lot-bleed__text .lot-h2{margin-top:22px;}
  .lot-bleed__copy{font-size:17px;line-height:1.8;color:var(--ink-dim);max-width:460px;margin:28px 0 0;}

  .lot-bleed__visual{
    position:relative;
    border-radius:var(--radius);
    overflow:visible;
  }
  .lot-bleed__frame{
    position:relative;border-radius:var(--radius);overflow:hidden;
    aspect-ratio:4/5;
    border:1px solid var(--line);
  }
  .lot-bleed__frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);}
  .lot-bleed__frame::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(8,9,13,.85) 100%);
  }
  .lot-bleed__chip{
    position:absolute;left:-34px;bottom:44px;
    background:var(--bg-2);border:1px solid var(--line);
    border-radius:18px;padding:20px 24px;
    max-width:230px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    backdrop-filter:blur(10px);
  }
  .lot-bleed__chip strong{
    display:block;font-family:var(--serif);font-size:30px;font-weight:600;
    background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
    margin-bottom:4px;
  }
  .lot-bleed__chip span{font-size:13px;color:var(--ink-dim);line-height:1.4;display:block;}

  /* ================= PROCESS ================= */
  .lot-process{padding:110px 0 130px;}
  .lot-process__layout{position:relative;}
  .lot-steps{
    position:relative;
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:8px;margin:52px 0 46px;
  }
  .lot-steps::before{
    content:"";position:absolute;top:29px;left:6%;right:6%;height:1px;
    background:var(--line);
  }
  .lot-steps::after{
    content:"";position:absolute;top:29px;left:6%;height:1px;
    width:calc((100% - 12%) * var(--progress, 0) / 100);
    background:var(--gradient);
    transition:width .6s cubic-bezier(.16,1,.3,1);
  }
  .lot-step{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;
    cursor:pointer;padding:6px 4px 0;background:none;border:none;
    outline:none;
  }
  .lot-step__dot{
    width:58px;height:58px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg-1);border:1px solid var(--line);
    color:var(--ink-faint);
    transition:all .5s cubic-bezier(.16,1,.3,1);
    position:relative;z-index:1;
  }
  .lot-step__dot svg{width:22px;height:22px;}
  .lot-step.is-active .lot-step__dot{
    background:var(--gradient);border-color:transparent;color:#1a1410;
    box-shadow:0 0 0 6px rgba(231,180,121,.12);
  }
  .lot-step__label{
    font-family:var(--serif-sc);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-faint);text-align:center;line-height:1.4;
    transition:color .4s ease;
  }
  .lot-step.is-active .lot-step__label{color:var(--ink);}
  .lot-step:focus-visible .lot-step__dot{outline:2px solid var(--gold);outline-offset:3px;}

  .lot-detail{
    border:1px solid var(--line);border-radius:var(--radius);
    padding:48px;background:rgba(255,255,255,.02);
    min-height:190px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .lot-detail__title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;margin:0 0 14px;}
  .lot-detail__text{font-size:16.5px;line-height:1.8;color:var(--ink-dim);margin:0;max-width:680px;}

  /* ================= BENEFITS ================= */
  .lot-benefits{padding:0 0 130px;}
  .lot-benefits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:48px;}
  .lot-benefit{
    background:var(--bg-1);padding:38px 30px 42px;position:relative;overflow:hidden;
    transition:background .5s ease;
  }
  .lot-benefit::before{
    content:"";position:absolute;top:-60px;left:-60px;width:160px;height:160px;border-radius:50%;
    background:radial-gradient(circle, rgba(231,180,121,.22), transparent 70%);
    opacity:0;transition:opacity .6s ease;
  }
  .lot-benefit:hover{background:var(--bg-2);}
  .lot-benefit:hover::before{opacity:1;}
  .lot-benefit__index{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:15px;display:block;margin-bottom:22px;}
  .lot-benefit__title{font-family:var(--serif);font-weight:500;font-size:21px;margin:0 0 12px;line-height:1.25;position:relative;}
  .lot-benefit__text{font-size:14px;line-height:1.65;color:var(--ink-dim);margin:0;position:relative;}

  /* ================= CTA BANNER ================= */
  .lot-cta{
    position:relative;margin:0 32px 110px;border-radius:32px;overflow:hidden;
    min-height:480px;display:flex;align-items:center;justify-content:center;text-align:center;
    isolation:isolate;
  }
  .lot-cta__img{
    position:absolute;inset:0;z-index:-2;
    background-image:url('https://images.pexels.com/photos/8293646/pexels-photo-8293646.jpeg?auto=compress&cs=tinysrgb&w=1920');
    background-size:cover;background-position:center;
    filter:saturate(.7) brightness(.5);
    transform:scale(1.05);
    transition:transform 1.4s cubic-bezier(.16,1,.3,1);
  }
  .lot-cta:hover .lot-cta__img{transform:scale(1.12);}
  .lot-cta__scrim{
    position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(ellipse 70% 60% at 50% 20%, rgba(231,180,121,.14), transparent 65%),
      linear-gradient(180deg, rgba(8,9,13,.55), rgba(8,9,13,.88));
  }
  .lot-cta__inner{padding:80px 40px;max-width:640px;}
  .lot-cta__title{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,58px);line-height:1.08;margin:0 0 22px;}
  .lot-cta__title em{font-style:italic;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .lot-cta__desc{font-size:17px;color:var(--ink-dim);line-height:1.6;margin:0 0 34px;}

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .lot-pillars__grid{grid-template-columns:1fr;}
    .lot-card{height:380px;}
    .lot-bleed__grid{grid-template-columns:1fr;}
    .lot-bleed__visual{order:-1;max-width:420px;margin:0 auto;}
    .lot-bleed__chip{left:16px;bottom:-24px;}
    .lot-benefits__grid{grid-template-columns:1fr 1fr;}
    .lot-steps{grid-template-columns:repeat(4,1fr);}
    .lot-step__label{font-size:11px;}
  }
  @media (max-width:640px){
    .lot-wrap{padding:0 20px;}
    .lot-hero{padding:120px 0 70px;min-height:auto;}
    .lot-hero__desc{font-size:16px;}
    .lot-benefits__grid{grid-template-columns:1fr;}
    .lot-detail{padding:30px;}
    .lot-cta{margin:0 16px 70px;border-radius:22px;}
    .lot-cta__inner{padding:56px 24px;}
    .lot-steps{gap:2px;}
    .lot-step__dot{width:46px;height:46px;}
    .lot-step__dot svg{width:18px;height:18px;}
    .lot-step__label{display:none;}
  }