/* ==========================================================================
   REMATE — Landing Page
   1. Tokens · 2. Reset/Base · 3. Layout · 4. Typography
   5. Components · 6. Sections · 7. Swiper · 8. Motion · 9. Responsive
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* Color */
  --ink:            #151515;   /* titulares / texto fuerte      */
  --ink-soft:       #444748;   /* párrafos                      */
  --ink-mute:       #8A8D8E;   /* metadatos, placeholders       */
  --brand:          #FF7F22;   /* naranja principal             */
  --brand-dark:     #E96B12;   /* hover naranja                 */
  --espresso:       #3B2117;   /* café oscuro (barras/paneles)  */
  --gold:           #FFC900;   /* amarillo acento               */
  --sale:           #FF0000;   /* precio tachado                */

  --paper:          #FFFEFD;   /* fondo de página               */
  --surface:        #F0F0F0;   /* tiles de logos                */
  --line:           #E4E4E4;   /* hairlines                     */
  --line-strong:    #CFCFCF;

  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255,255,255,.82);

  /* Tipografía */
  --font-display:   "Aboreto", "Times New Roman", serif;
  --font-script:    "Arapey", "Georgia", serif;
  --font-sans:      "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1:          clamp(2.5rem, 6.6vw, 5.25rem);   /*  40 → 84px */
  --fs-h1-sm:       clamp(2rem, 5vw, 3.5rem);        /*  banner    */
  --fs-h2:          clamp(1.625rem, 2.9vw, 2.1875rem);/* 26 → 35px */
  --fs-h3:          clamp(1.125rem, 1.8vw, 1.375rem);/*  18 → 22px */
  --fs-lede:        clamp(1rem, 1.6vw, 1.25rem);     /*  16 → 20px */
  --fs-body:        clamp(1rem, 1.4vw, 1.125rem);    /*  16 → 18px */
  --fs-btn:         1rem;                             /* 16px      */
  --fs-label:       .8125rem;                         /* 13px      */
  --fs-small:       .875rem;                          /* 14px      */

  --lh-tight:       1.06;
  --lh-body:        1.9;

  --ls-caps:        .16em;
  --ls-btn:         .08em;

  /* Layout */
  --container:      1152px;
  --gutter:         64px;
  --gap:            24px;
  --split-pad:      64px;

  --section-y:      clamp(56px, 7vw, 88px);
  --section-y-lg:   clamp(72px, 9vw, 112px);
  /* espacio entre el contenedor y el borde derecho del viewport */
  --bleed:          max(var(--gutter), calc((100vw - var(--container)) / 2));

  /* Efectos */
  --radius-pill:    999px;
  --shadow-card:    0 2px 18px rgba(21,21,21,.07);
  --shadow-card-h:  0 14px 40px rgba(21,21,21,.14);
  --ease:           cubic-bezier(.22,.61,.36,1);
  --dur:            .45s;
}

/* ── 2. RESET / BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
hr{ border:0; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.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;
}

/* ── 3. LAYOUT ───────────────────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:calc(var(--section-y) * .9); }
.section--ruled{ border-top:1px solid var(--line); }

.section__head{ margin-bottom:36px; }
.section__head--split{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.section__head--center{ text-align:center; }
.section__sub{
  margin-top:14px; font-size:var(--fs-lede); line-height:1.55; color:var(--ink-soft);
}
.section__head--center .section__sub{ max-width:800px; margin-inline:auto; }
.section__head--center .section__sub--wide{ max-width:940px; }
.section__cta{ margin-top:40px; text-align:center; }

/* ── 4. TIPOGRAFÍA ───────────────────────────────────────────────────────── */
.display{
  display:block;
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  letter-spacing:.005em;
  text-transform:uppercase;
}
.display--script{
  font-family:var(--font-script);
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  color:var(--brand);
  line-height:1.12;
}
.display--md{ font-size:var(--fs-h1-sm); }

.h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--fs-h2);
  line-height:1.18;
  letter-spacing:.01em;
  color:var(--ink);
  text-transform:uppercase;
}

/* ── 5. COMPONENTES ──────────────────────────────────────────────────────── */

/* 5.1 Botones */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 28px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-size:var(--fs-btn); font-weight:700; line-height:1;
  letter-spacing:var(--ls-btn); text-transform:uppercase;
  white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn__icon{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.btn--block{ display:flex; width:100%; }
.btn--sm{ padding:13px 22px; font-size:.875rem; }

.btn--primary{ --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:var(--brand); }
.btn--primary:hover{ --btn-bg:var(--brand-dark); --btn-bd:var(--brand-dark); }

.btn--light{ --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-bd:var(--paper); }
.btn--light:hover{ --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:var(--brand); }

.btn--ghost-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.85); }
.btn--ghost-light:hover{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }

.btn--outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--ink); }
.btn--outline:hover{ --btn-bg:var(--ink); --btn-fg:#fff; }

/* 5.2 Píldoras / tabs */
.tabs{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.tabs--center{ justify-content:center; }
.pill{
  padding:8px 18px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);
  color:var(--ink-mute);
  font-size:var(--fs-label); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.4;
  transition:all .3s var(--ease);
}
.pill:hover{ border-color:var(--brand); color:var(--brand); }
.pill.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* 5.3 Badge */
.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 18px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font-size:var(--fs-label); font-weight:500;
  letter-spacing:var(--ls-caps); text-transform:uppercase; line-height:1.4;
}
.badge__flag{ font-size:1em; letter-spacing:0; }

/* 5.4 Etiquetas sobre imagen */
.tag{
  position:absolute; top:12px; right:0;
  padding:7px 14px;
  background:var(--brand); color:#fff;
  font-size:var(--fs-small); font-weight:500; line-height:1.3;
  text-transform:uppercase; letter-spacing:.02em;
}
.tag--best{ font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:var(--fs-label); }

/* 5.5 Rating */
.rating{ display:flex; align-items:center; gap:8px; line-height:1; }
.rating__stars{ color:var(--brand); font-size:15px; letter-spacing:.14em; }
.rating__count{ font-size:var(--fs-small); color:var(--ink-soft); }

/* 5.6 Checklist (hero) */
.checklist{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; }
.checklist__item{
  display:flex; align-items:center; gap:9px;
  color:var(--on-dark-soft); font-size:var(--fs-body); line-height:1.4;
}
.checklist__tick{ color:var(--gold); font-weight:700; }

/* 5.7 Featurelist (showroom) */
.featurelist{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px 64px;
  padding-block:22px; border-top:1px solid var(--line);
  max-width:1020px; margin-inline:auto;
}
.featurelist__item{ display:flex; align-items:center; gap:10px; font-size:var(--fs-body); line-height:1.4; }

/* 5.8 Modal de cotización */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(21,21,21,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fadeIn .3s var(--ease);
}
.modal__panel{
  position:relative; z-index:1;
  width:100%; max-width:540px; max-height:calc(100vh - 48px);
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:40px;
  background:var(--paper);
  box-shadow:0 30px 80px rgba(21,21,21,.32);
  animation:modalIn .4s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.98); } }

.modal__close{
  position:absolute; top:14px; right:14px;
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.modal__close svg{
  width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;
}
.modal__close:hover{ background:var(--surface); color:var(--ink); }

.modal__eyebrow{
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--brand); line-height:1.3;
}
.modal__title{
  margin-top:10px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem, 3vw, 2rem); line-height:1.18;
  text-transform:uppercase; color:var(--ink);
}
.modal__text{ margin-top:12px; font-size:1rem; line-height:1.55; }
.modal__legal{
  margin-top:14px; text-align:center;
  font-size:var(--fs-label); letter-spacing:.04em; color:var(--ink-mute); line-height:1.5;
}
.modal__legal a{ text-decoration:underline; }

/* Campos del formulario de cotización */
.quote-form{ margin-top:26px; }
.quote-form__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px;
}
.field-group{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field-group--full{ grid-column:1 / -1; }
.field-group__label{
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); line-height:1.3;
}
.field-group__input{
  width:100%; padding:14px 16px;
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink);
  font-size:1rem; line-height:1.4;
  transition:border-color .25s var(--ease);
}
.field-group__input::placeholder{ color:var(--ink-mute); }
.field-group__input:focus{ outline:none; border-color:var(--brand); }
.field-group__input:user-invalid{ border-color:var(--sale); }
select.field-group__input{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.is-loading{ opacity:.6; pointer-events:none; }

/* ── 6. SECCIONES ────────────────────────────────────────────────────────── */

/* 6.1 Marquee */
.marquee{
  position:relative; z-index:60;
  background:var(--espresso); color:#fff;
  overflow:hidden;
  font-size:var(--fs-small); line-height:32px;
}
.marquee__track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; gap:12px; padding-right:12px; white-space:nowrap; }
.marquee__item{ display:inline-flex; align-items:center; gap:8px; }
.marquee__emoji{ font-size:1.05em; }
.marquee__sep{ opacity:.55; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* 6.2 Header */
.header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.header.is-stuck{ box-shadow:0 4px 22px rgba(21,21,21,.09); border-color:var(--line); }
.header__inner{
  display:flex; align-items:center; gap:32px;
  height:80px;
  width:100%; max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto; padding-inline:var(--gutter);
}
.header__brand img{ width:143px; height:auto; }
.nav{ flex:1; }
.nav__list{ display:flex; align-items:center; justify-content:center; gap:30px; }
.nav__link{
  position:relative;
  font-size:var(--fs-btn); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); line-height:1.2;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--brand); transition:width .3s var(--ease);
}
.nav__link:hover::after{ width:100%; }
.header__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:none; }
.burger{ display:none; width:40px; height:40px; padding:9px 8px; }
.burger span{
  display:block; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.burger span + span{ margin-top:5px; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* 6.3 Hero */
.hero{ position:relative; min-height:730px; display:grid; align-items:center; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.06); animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0;
}
.hero__inner{ position:relative; z-index:2; text-align:center; padding-block:72px; }
.hero__title{ margin-top:30px; color:#fff; }
.hero__lede{
  margin-top:26px; margin-inline:auto; max-width:70ch;
  color:var(--on-dark-soft); font-size:var(--fs-lede); line-height:1.6;
}
.hero__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:32px; }
.hero__rule{
  max-width:780px; margin:34px auto 0;
  border-top:1px solid rgba(255,255,255,.25);
}
.hero .checklist{ margin-top:22px; }

/* 6.4 Trust bar */
.trust{ display:flex; align-items:stretch; }
.trust__item{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:14px; min-height:60px; padding-inline:14px; text-align:center;
}
.trust__item + .trust__item{ border-left:1px solid var(--line); }
.trust__headline{
  font-family:var(--font-display); font-size:clamp(1.375rem,2.4vw,1.875rem);
  line-height:1; letter-spacing:.01em; color:var(--espresso); text-transform:uppercase;
}
.trust__label{
  font-size:var(--fs-btn); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.3; white-space:nowrap;
}
.trust__icon{ width:26px; height:auto; object-fit:contain; }

/* 6.5 Featured / logo wall */
.featured__kicker{
  margin-top:44px; text-align:center;
  font-family:var(--font-script); font-style:italic;
  font-size:clamp(1.25rem,2vw,1.6875rem); line-height:1.2; color:var(--ink);
}
.logo-wall{ margin-top:26px; max-width:1128px; margin-inline:auto; }
.logo-tile{
  aspect-ratio:208 / 147; background:var(--surface); overflow:hidden;
}
.logo-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.logo-tile:hover img{ transform:scale(1.04); }

/* 6.6 Category cards */
.cat-card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:270 / 340;
}
.cat-card__img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.cat-card:hover .cat-card__img{ transform:scale(1.07); }
.cat-card__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,21,21,.05) 35%, rgba(21,21,21,.62) 100%);
}
.cat-card__body{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:4px;
  padding:26px 24px; color:#fff;
}
.cat-card__title{ font-size:var(--fs-lede); font-weight:400; line-height:1.3; text-align: left; }
.cat-card__link{
  align-self:flex-start;
  font-size:var(--fs-small); letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.9); padding-bottom:2px; line-height:1.4;
}

/* 6.7 Product cards */
.product{
  display:flex; flex-direction:column;
  height:100%; padding:16px;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product:hover{ box-shadow:var(--shadow-card-h); transform:translateY(-4px); }
.product__media{ position:relative; overflow:hidden; aspect-ratio:326 / 236; }
.product__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.product:hover .product__media img{ transform:scale(1.05); }
.product__name{
  margin-top:18px;
  font-size:var(--fs-lede); font-weight:700; line-height:1.3; color:var(--ink);
}
.product .rating{ margin-top:9px; }
.product__specs{ margin-top:9px; font-size:var(--fs-small); line-height:1.4; color:var(--ink-soft); }
.product__price{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-top:16px;
}
.price{ line-height:1.2; }
.price--old{ color:var(--sale); font-size:.9375rem; text-decoration:line-through; }
.price--now{ margin-top:2px; color:var(--ink); font-size:1.75rem; font-weight:700; letter-spacing:-.01em; }
.cart-btn{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; background:var(--gold);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.cart-btn img{ width:22px; height:22px; object-fit:contain; }
.cart-btn:hover{ background:var(--brand); transform:scale(1.06); }
.product .btn--outline{ margin-top:18px; }

/* 6.8 Casos de uso (split 50/50 full-bleed) */
.usecase{ display:grid; grid-template-columns:1fr 1fr; }
.usecase__panel{ display:grid; align-items:center; padding:56px var(--split-pad); }
.usecase--reverse .usecase__panel{ order:2; }
.usecase--reverse .usecase__media{ order:1; }
.usecase__body{
  border-left:3px solid var(--brand);
  padding-left:36px;
  max-width:520px;
}
.usecase__num{
  font-family:var(--font-script); font-size:1.5rem; line-height:1; color:var(--ink);
}
.usecase__title{
  margin-top:24px;
  font-size:var(--fs-h3); font-weight:400; line-height:1.3;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}
.usecase__text{ margin-top:20px; font-size:var(--fs-body); line-height:var(--lh-body); }
.usecase__body .btn{ margin-top:28px; }
.usecase__media{ position:relative; min-height:340px; }
.usecase__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.usecase--dark{ background:var(--espresso); }
.usecase--dark .usecase__body{ border-left-color:var(--gold); }
.usecase--dark .usecase__num,
.usecase--dark .usecase__title{ color:#fff; }
.usecase--dark .usecase__text{ color:var(--on-dark-soft); }

/* 6.9 Showroom */
.showroom{ max-width:1096px; margin:0 auto; overflow:hidden; }
.showroom__img{
  width:100%; aspect-ratio:1094 / 466; object-fit:cover;
  transition:opacity .35s var(--ease);
}
.showroom__img.is-swapping{ opacity:0; }
#showroom .featurelist{ margin-top:34px; }

/* 6.10 Reseñas */
.review-col{ display:flex; flex-direction:column; gap:22px; }
.review-shot{ overflow:hidden; box-shadow:var(--shadow-card); }
.review-shot img{ width:100%; aspect-ratio:736 / 414; object-fit:cover; transition:transform .8s var(--ease); }
.review-shot:hover img{ transform:scale(1.05); }
.review{
  padding:26px 24px;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.review__quote{
  margin-top:16px; font-size:1rem; line-height:1.55; color:var(--ink-soft);
}
.review__author{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.review__avatar{ width:44px; height:44px; object-fit:cover; flex:none; }
.review__name{
  display:block; font-size:var(--fs-body); font-weight:700; line-height:1.3;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
}
.review__meta{
  display:block; margin-top:2px;
  font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute);
}

/* 6.11 Banner CTA */
.banner{ position:relative; display:grid; align-items:center; min-height:440px; overflow:hidden; }
.banner__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner__scrim{ position:absolute; inset:0; background:rgba(21,21,21,.5); }
.banner__inner{ position:relative; z-index:2; text-align:center; padding-block:72px; color:#fff; }
.banner__text{
  margin-top:22px; margin-inline:auto; max-width:64ch;
  color:var(--on-dark-soft); font-size:var(--fs-lede); line-height:1.6;
}
.banner__inner .btn{ margin-top:32px; }

/* 6.12 Newsletter */
.newsletter{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:40px; align-items:start;
}
.newsletter__title{
  font-size:clamp(1.375rem,2.4vw,1.75rem); font-weight:400; line-height:1.25;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
}
.newsletter__text{ margin-top:14px; font-size:var(--fs-body); line-height:1.55; max-width:46ch; }
.field{ display:flex; }
.field__input{
  flex:1 1 0; min-width:0;
  padding:16px 18px;
  border:1px solid var(--line-strong); border-right:0;
  background:var(--paper); color:var(--ink);
  font-size:var(--fs-body); line-height:1.4;
}
.field__input + .field__input{ border-left:1px solid var(--line-strong); }
.field__input::placeholder{ color:var(--ink-mute); }
.field__input:focus{ outline:none; border-color:var(--brand); }
.field__btn{ flex:none; }
.newsletter__legal{
  margin-top:14px;
  font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
}
.newsletter__legal a{ text-decoration:underline; }
.form-msg{ margin-top:10px; font-size:var(--fs-small); color:var(--brand); min-height:1.2em; }

/* 6.13 Footer */
.footer{ padding-block:var(--section-y-lg) 40px; border-top:1px solid var(--line); }
.footer__grid{
  display:grid; grid-template-columns:1.15fr .85fr 1fr 1.15fr; gap:40px;
}
.footer__logo{ width:180px; height:auto; }
.footer__about{ margin-top:22px; font-size:var(--fs-body); line-height:1.55; max-width:34ch; }
.footer__heading{
  font-family:var(--font-display); font-weight:400;
  font-size:1.5rem; line-height:1.2; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink);
}
.footer__col .footer__about{ margin-top:18px; }
.footer__links{ margin-top:22px; display:grid; gap:14px; }
.footer__links a{
  font-size:var(--fs-btn); letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
  transition:color .25s var(--ease);
}
.footer__links a:hover{ color:var(--brand); }
.social{ display:flex; gap:20px; margin-top:30px; }
.social__link{ display:grid; place-items:center; width:28px; height:28px; color:var(--brand); }
.social__link svg{
  width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.social__link:hover{ color:var(--espresso); }
.footer__form{ margin-top:20px; }
.footer__input{
  width:100%; padding:15px 18px; margin-bottom:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase;
}
.footer__input::placeholder{ color:var(--ink-mute); }
.footer__input:focus{ outline:none; border-color:var(--brand); }

.footer__bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:var(--section-y); padding-top:30px; border-top:1px solid var(--line);
}
.footer__copy,
.footer__legal a{
  font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.footer__legal{ display:flex; gap:26px; }
.footer__legal a{ text-decoration:underline; }
.footer__legal a:hover{ color:var(--brand); }

.pay{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pay__item{
  display:grid; place-items:center;
  width:42px; height:28px;
  border:1px solid var(--line); border-radius:4px; background:#fff;
}
.pay__mark{ font-size:9px; font-weight:800; letter-spacing:.02em; line-height:1; }
.pay__mark--visa{ color:#1A1F71; font-style:italic; font-size:10px; }
.pay__mark--paypal{ color:#003087; font-style:italic; }
.pay__mark--paypal em{ color:#009CDE; font-style:italic; }
.pay__mark--apple{ color:#000; font-size:10px; font-weight:600; }
.pay__mark--gpay{ color:#5F6368; font-size:10px; font-weight:600; }
.pay__mark--gpay b{ color:#4285F4; }
.pay__mark--jcb{ color:#0B4EA2; }
.pay__mark--diners{ color:#0079BE; font-size:8px; }
.pay__item--amex{ background:#006FCF; border-color:#006FCF; }
.pay__item--amex .pay__mark{ color:#fff; }
.pay__dots{ display:flex; align-items:center; }
.pay__dots i{ display:block; width:14px; height:14px; border-radius:50%; }

/* ── 7. SWIPER ───────────────────────────────────────────────────────────── */
.swiper{ overflow:hidden; }
.swiper-wrapper{ align-items:stretch; box-sizing:border-box; }
.swiper-slide{ height:auto; }
/* aire vertical para que la sombra de las tarjetas no se recorte */
.js-swiper-products,
.js-swiper-reviews{ padding-block:10px 16px; margin-block:-10px -16px; }
/* la 4ª tarjeta asoma hasta el borde del viewport, como en el mockup */
@media (min-width:769px){
  .js-swiper-products{ margin-right:calc(var(--bleed) * -1); }
}
.swiper-pagination{ position:static; margin-top:26px; }
.swiper-pagination-bullet{ background:var(--ink-mute); opacity:.4; }
.swiper-pagination-bullet-active{ background:var(--brand); opacity:1; }
/* Fallback si el CDN de Swiper no carga */
.swiper:not(.swiper-initialized) .swiper-wrapper{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap);
}

/* ── 8. MOTION ───────────────────────────────────────────────────────────── */
/* Sin JS (o antes de que arranque) el contenido se ve siempre.
   Sólo html.js activa el estado oculto inicial. */
html.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
html.js .reveal.is-in{ opacity:1; transform:none; }

/* ── 9. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:1180px){
  :root{ --gutter:40px; --split-pad:40px; }
  .nav__list{ gap:20px; }
  .nav__link{ font-size:.9375rem; }
}

@media (max-width:1024px){
  :root{ --gutter:32px; --split-pad:36px; }
  .header__inner{ gap:16px; }
  .nav{ position:fixed; inset:80px 0 auto; flex:none;
        background:var(--paper); border-bottom:1px solid var(--line);
        max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
  .nav.is-open{ max-height:70vh; overflow:auto; box-shadow:0 18px 40px rgba(21,21,21,.12); }
  .nav__list{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:8px var(--gutter) 24px; }
  .nav__link{ display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav__link::after{ display:none; }
  .burger{ display:block; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:44px 32px; }
}

@media (max-width:860px){
  .trust{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px 0; }
  .trust__label{ white-space:normal; }
  .trust__item:nth-child(3){ border-left:0; }
  .trust__item:nth-child(n+3){ border-top:1px solid var(--line); padding-top:28px; }
  .usecase{ grid-template-columns:1fr; }
  .usecase__panel{ order:2 !important; padding:44px var(--gutter); }
  .usecase__media{ order:1 !important; min-height:0; aspect-ratio:16 / 9; }
  .usecase__media img{ position:static; }
  .newsletter{ grid-template-columns:1fr; gap:26px; }
}

@media (max-width:768px){
  :root{ --gutter:22px; --split-pad:22px; --gap:16px; }
  .btn{ white-space:normal; padding:16px 22px; text-align:center; }
  .btn--sm{ padding:12px 16px; font-size:.8125rem; }
  .br-md{ display:none; }
  .modal{ padding:0; align-items:flex-end; }
  .modal__panel{ max-width:none; max-height:92vh; padding:32px 22px 26px; }
  .quote-form__grid{ grid-template-columns:1fr; }
  .hero{ min-height:0; }
  .hero__inner{ padding-block:88px 72px; }
  .hero__actions .btn{ flex:1 1 240px; }
  .section__head--split{ flex-direction:column; align-items:flex-start; gap:20px; }
  .tabs{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
         margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
         scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .pill{ flex:none; }
  .featurelist{ flex-direction:column; align-items:flex-start; gap:12px; }
  .footer__grid{ grid-template-columns:1fr; gap:40px; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:20px; }
  .field{ flex-direction:column; gap:12px; }
  .field__input{ border-right:1px solid var(--line-strong); }
  .price--now{ font-size:1.5rem; }
  .showroom__img{ aspect-ratio:4 / 3; }
}

@media (max-width:480px){
  .checklist{ flex-direction:column; align-items:center; gap:10px; }
  .hero__actions{ flex-direction:column; }
  /* flex:1 1 240px del breakpoint anterior fijaría 240px de ALTURA en columna */
  .hero__actions .btn{ flex:0 0 auto; width:100%; }
  .trust{ display:grid; grid-template-columns:1fr; }
  .trust__item + .trust__item{ border-left:0; border-top:1px solid var(--line); padding-top:26px; }
}

@media (prefers-reduced-motion:reduce){
  .hero__bg{ animation:none; transform:none; }
  .marquee__track{ animation-duration:120s; }
  /* nunca se gatea la visibilidad del contenido con reduced-motion */
  html.js .reveal{ transition-duration:.01ms; transform:none; }
}