.hero{ position:relative; overflow:hidden; background:var(--inverted); }
.hero__slides{ position:relative; min-height:clamp(560px, 80vh, 760px); }
.hero__slide{
  position:absolute; inset:0;
  display:grid; align-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .8s var(--ease), visibility .8s;
  background-size:cover; background-position:center;
}
.hero__slide.is-active{ opacity:1; visibility:visible; }

.hero__slide::after{
  content:""; position:absolute; inset:0;
  background:rgba(21,26,23,.74);
}
.hero__content{
  position:relative; z-index:2;
  padding-block:var(--space-96);
  max-width:900px; margin-inline:auto; text-align:center;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(38px, 6.4vw, 76px);
  font-weight:var(--fw-bold);
  line-height:1.08;
  letter-spacing:var(--tracking-heading);
  color:#fff;
  margin:0 0 var(--space-24);
  opacity:0; transform:translateY(24px);
}
.hero__text{
  font-size:var(--text-body);
  line-height:1.56; letter-spacing:var(--tracking-body);
  color:rgba(255,255,255,.85);
  max-width:620px; margin:0 auto var(--space-40);
  opacity:0; transform:translateY(24px);
}
.hero__btns{
  display:flex; gap:var(--space-12); flex-wrap:wrap; justify-content:center;
  opacity:0; transform:translateY(24px);
}
.hero__btns .btn--ghost{ --btn-fg:#fff; }
.hero__btns .btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }

.hero__slide.is-active .hero__title{ animation:heroIn .7s .15s var(--ease) forwards; }
.hero__slide.is-active .hero__text { animation:heroIn .7s .27s var(--ease) forwards; }
.hero__slide.is-active .hero__btns { animation:heroIn .7s .39s var(--ease) forwards; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

.hero__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:5;
  width:44px; height:44px; border-radius:var(--radius-round);
  display:grid; place-items:center;
  color:#fff; font-size:14px;
  background:rgba(255,255,255,.08);
  transition:background var(--dur) var(--ease);
}
.hero__arrow:hover{ background:rgba(255,255,255,.2); }
.hero__arrow--prev{ left:var(--space-24); }
.hero__arrow--next{ right:var(--space-24); }

.hero__dots{
  position:absolute; left:50%; translate:-50% 0; bottom:var(--space-32); z-index:5;
  display:flex; gap:var(--space-8);
}
.hero__dots button{
  width:8px; height:8px; border-radius:var(--radius-round);
  background:rgba(255,255,255,.3);
  transition:background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hero__dots button.is-active{ background:#fff; width:26px; }

.tldr{ padding-block:var(--section-gap); background:var(--canvas); }
.tldr__inner{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--space-48); align-items:start;
}
.tldr__lead{
  font-size:var(--text-body); line-height:1.56;
  letter-spacing:var(--tracking-body); color:var(--heading);
  margin-bottom:var(--space-24);
}
.tldr__lead a,
.tldr__list a{
  color:var(--action-text); text-decoration:underline; text-underline-offset:3px;
}
.tldr__lead a:hover,
.tldr__list a:hover{ color:var(--brand-abyss); }

.tldr__box{
  background:var(--wash);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:var(--space-32);
}
.tldr__box-title{
  font-family:var(--font-body);
  font-size:var(--text-eyebrow); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--space-20);
}
.tldr__list{ display:grid; gap:var(--space-12); }
.tldr__list li{
  position:relative; padding-left:var(--space-24);
  font-size:var(--text-body-sm); line-height:1.56; color:var(--heading);
}
.tldr__list li::before{
  content:""; position:absolute; left:2px; top:10px;
  width:7px; height:7px; border-radius:var(--radius-round); background:var(--action-text);
}

.table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  margin-bottom:var(--space-48);
}
.data-table{
  width:100%; border-collapse:collapse;
  font-size:var(--text-body-sm); min-width:640px;
}
.data-table caption{
  text-align:left; padding:var(--space-20) var(--space-24) 0;
  font-family:var(--font-body);
  font-size:var(--text-eyebrow); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:var(--text-muted);
}
.data-table thead th{
  text-align:left; padding:var(--space-16) var(--space-24);
  font-family:var(--font-body); font-weight:var(--fw-bold);
  font-size:var(--text-caption); color:var(--heading);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table tbody th{
  text-align:left; padding:var(--space-16) var(--space-24);
  font-weight:var(--fw-bold); color:var(--heading);
}
.data-table td{
  padding:var(--space-16) var(--space-24);
  color:var(--text); line-height:1.5;
}
.data-table tbody tr{ border-bottom:1px solid var(--border); }
.data-table tbody tr:last-child{ border-bottom:0; }
.data-table tbody tr:hover{ background:var(--wash); }

.about{ padding-block:var(--section-gap); background:var(--canvas); }
.about__inner{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:var(--space-64); align-items:center;
}
.about__media{ position:relative; padding-bottom:var(--space-48); padding-right:var(--space-48); }
.about__img{ border-radius:var(--radius-card); overflow:hidden; }
.about__img--main img{ width:100%; aspect-ratio:4/4.3; object-fit:cover; }
.about__img--sub{
  position:absolute; right:0; bottom:0; width:56%;
  border:4px solid var(--card);
}
.about__img--sub img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

.about__lead{
  font-size:var(--text-body); line-height:1.56;
  letter-spacing:var(--tracking-body); color:var(--heading);
}
.about__quote{
  margin:var(--space-24) 0;
  padding:var(--space-24);
  background:var(--wash);
  border-radius:var(--radius-card);
  font-size:var(--text-body-sm); line-height:1.56; color:var(--heading);
}
.about__quote .ico{ color:var(--action-text); margin-right:10px; }
.about__list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--space-8) var(--space-20);
  margin-bottom:var(--space-32);
}
.about__list li{
  display:flex; align-items:center; gap:10px;
  font-size:15px; color:var(--heading);
}
.about__list .ico{ color:var(--action-text); font-size:13px; }
.about__actions{ display:flex; align-items:center; gap:var(--space-24); flex-wrap:wrap; }
.about__phone{ display:flex; align-items:center; gap:var(--space-12); }
.about__phone .ico-box{
  width:40px; height:40px; border-radius:var(--radius-button);
  display:grid; place-items:center;
  background:var(--wash); color:var(--action-text); font-size:15px;
}
.about__phone span{ display:flex; flex-direction:column; line-height:1.25; }
.about__phone small{ font-size:12px; color:var(--text-muted); }
.about__phone strong{
  font-family:var(--font-body); font-size:16px;
  font-weight:var(--fw-bold); color:var(--heading);
}

.services{ padding-block:var(--section-gap); background:var(--inverted); }
.services .sec-head{ text-align:center; }

.services__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-24);
}

.service{
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.service__img{ overflow:hidden; }
.service__img img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .8s var(--ease);
}
.service:hover .service__img img{ transform:scale(1.04); }
/* Tarjetas con varias fotos: se apilan y se alternan con un fundido. */
.service__img--fade{ position:relative; aspect-ratio:16/10; }
.service__img--fade img{
  position:absolute; inset:0; height:100%;
  opacity:0; transition:opacity 1.2s var(--ease), transform .8s var(--ease);
}
.service__img--fade img.is-active{ opacity:1; }
.service__body{
  padding:var(--card-padding);
  flex:1; display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.service__title{
  font-size:22px; font-weight:var(--fw-semibold);
  letter-spacing:-0.008em; color:#fff; margin-bottom:var(--space-8);
}
.service__title a:hover{ color:var(--brand-glow); }
.service__body p{
  font-size:var(--text-body-sm); line-height:1.5;
  color:rgba(255,255,255,.72); margin-bottom:var(--space-20);
}
.service__link{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:var(--fw-bold);
  color:var(--brand-glow);
}
.service__link .ico{ font-size:11px; transition:transform var(--dur) var(--ease); }
.service__link:hover .ico{ transform:translateX(4px); }

.service--cta{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.22);
  justify-content:center;
}
.service--cta .btn{ margin-top:var(--space-8); }

.solve{ padding-block:var(--section-gap); background:var(--wash); }
.solve .sec-head{ margin-bottom:var(--space-32); }

.solve__list{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-12);
  margin-bottom:var(--space-40);
}
.solve__list li{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:var(--space-20);
  font-size:15px; line-height:1.4; color:var(--heading);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.solve__list li:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.solve__cta{ text-align:center; }

.catalog{ padding-block:var(--section-gap); background:var(--canvas); }
.tabs__nav{
  display:flex; gap:var(--space-8); flex-wrap:wrap; justify-content:center;
  margin-bottom:var(--space-40);
}
.tabs__btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:15px; font-weight:var(--fw-bold);
  padding:12px var(--space-20);
  border-radius:var(--radius-button);
  background:transparent; color:var(--heading);
  border:1px solid var(--border);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tabs__btn:hover{ border-color:var(--border); background:var(--wash); }
.tabs__btn.is-active{
  background:var(--brand-green); color:#fff; border-color:var(--brand-green);
}

.tabs__panel{ display:none; }
.tabs__panel.is-active{ display:block; animation:fadeUp .5s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }

.tabs__intro{
  background:var(--wash);
  border-radius:var(--radius-card);
  padding:var(--space-32);
  margin-bottom:var(--space-24);
  text-align:center;
}
.tabs__intro h3{ font-size:var(--text-subheading); letter-spacing:var(--tracking-sub); margin-bottom:var(--space-8); }
.tabs__intro h3 em{ font-style:normal; font-weight:var(--fw-regular); color:var(--text-muted); -webkit-text-fill-color:currentColor; background:none; }
.tabs__intro p{ margin:0; font-size:var(--text-body-sm); line-height:1.5; }

.chip-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:var(--space-8); }
.chip-list li{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:var(--space-12) var(--space-16);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  font-size:15px; line-height:1.4; color:var(--heading);
  background:transparent;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip-list li:hover{ border-color:var(--border-strong); background:var(--wash); }

.tabs__note{
  margin-top:var(--space-20); padding:var(--space-16) var(--space-20);
  background:var(--cool-wash); border-radius:var(--radius-card);
  color:var(--heading); font-size:15px;
}
.tabs__note .ico{ color:var(--action-text); margin-right:8px; }

.cta-piece{ padding-block:var(--space-96); background:var(--brand-green); }
.cta-piece__inner{
  display:grid; gap:var(--space-40); justify-items:center; text-align:center;
}
.cta-piece__text{ max-width:760px; }
.cta-piece__text p{
  color:rgba(255,255,255,.85); margin:0;
  font-size:var(--text-body); line-height:1.56; letter-spacing:var(--tracking-body);
}
.cta-piece__text strong{ color:var(--brand-glow); }
/* PC: los 5 botones en una sola fila. */
.cta-piece__actions{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-12); width:100%;
}
.cta-piece__actions .btn{ padding-inline:var(--space-16); white-space:nowrap; }

.brands{
  padding-block:var(--space-64);
  background:var(--brand-carbon);
  overflow:hidden;
}
.brands .sec-head{ margin-bottom:var(--space-40); }

.brands__viewport{
  position:relative;

  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brands__track{
  display:flex; align-items:center;
  width:max-content;
}
.brands__track.is-looping{ animation:brandScroll 46s linear infinite; }

.brands__viewport:hover .brands__track,
.brands__track:focus-within{ animation-play-state:paused; }

.brands__item{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:200px; height:72px;
  padding-inline:var(--space-24);
}
.brands__item img{
  display:block;
  max-width:148px; max-height:38px;
  width:auto; height:auto; object-fit:contain;
  opacity:.60;
  transition:opacity var(--dur) var(--ease);
}
.brands__item--compact img{ max-width:72px; max-height:56px; }
.brands__item:hover img{ opacity:1; }

.brands__note{
  margin:var(--space-40) 0 0;
  text-align:center; font-size:15px;
  color:rgba(255,255,255,.55);
}

@keyframes brandScroll{
  from{ transform:translate3d(0,0,0); }
  to{   transform:translate3d(-50%,0,0); }
}

.sectors{ padding-block:var(--section-gap); background:var(--canvas); }
.sectors__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-20); }
.sector{
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:var(--space-32) var(--card-padding);
  text-align:center;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sector:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.sector h3{ font-size:22px; font-weight:var(--fw-semibold); letter-spacing:-0.004em; margin-bottom:var(--space-8); }
.sector p{ margin:0; font-size:var(--text-body-sm); line-height:1.5; }

.solutions{ padding-block:var(--section-gap); background:var(--wash); }
.solutions__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-24); }
.solution{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:var(--space-32);
  text-align:center;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.solution:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.solution h3{ font-size:22px; font-weight:var(--fw-semibold); letter-spacing:-0.004em; margin-bottom:var(--space-12); }
.solution p{ margin:0; font-size:var(--text-body-sm); line-height:1.5; }
.solution--accent{
  background:var(--brand-carbon);
  border-color:transparent;
  color:rgba(255,255,255,.78);
}
.solution--accent h3{ color:#fff; }
.solution__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:var(--space-16);
  font-size:15px; font-weight:var(--fw-bold); color:var(--brand-glow);
}
.solution__link .ico{ font-size:11px; transition:transform var(--dur) var(--ease); }
.solution__link:hover .ico{ transform:translateX(4px); }

.faq{ padding-block:var(--section-gap); background:var(--canvas); }
.faq__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-64); align-items:start; }
.faq__media{ position:relative; }
.faq__media img{
  width:100%; border-radius:var(--radius-card);
  aspect-ratio:4/4.2; object-fit:cover;
}
.faq__card{
  position:absolute; right:-16px; bottom:var(--space-32);
  display:flex; align-items:center; gap:var(--space-12);
  background:var(--card); border:1px solid var(--border);
  padding:var(--space-16) var(--space-20); border-radius:var(--radius-card);
}
.faq__card .ico-box{
  width:40px; height:40px; border-radius:var(--radius-button);
  display:grid; place-items:center;
  background:var(--brand-green); color:#fff; font-size:16px;
}
.faq__card small{ display:block; font-size:12px; color:var(--text-muted); }
.faq__card strong{ font-family:var(--font-body); font-size:16px; font-weight:var(--fw-bold); color:var(--heading); }

.accordion__item{
  border-bottom:1px solid var(--border);
  transition:border-color var(--dur) var(--ease);
}
.accordion__h{ margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; }
.accordion__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-20);
  padding:var(--space-20) 0; text-align:left;
  font-family:var(--font-display); font-size:21px; font-weight:var(--fw-semibold);
  letter-spacing:-0.004em; color:var(--heading);
  transition:color var(--dur) var(--ease);
}
.accordion__head .ico{
  flex-shrink:0; font-size:12px; color:var(--action-text);
  transition:transform var(--dur) var(--ease);
}
.accordion__item.is-open .accordion__head{ color:var(--action-text); }
.accordion__item.is-open .accordion__head .ico{ transform:rotate(180deg); }
.accordion__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur) var(--ease);
}
.accordion__item.is-open .accordion__body{ grid-template-rows:1fr; }
.accordion__body > p{ overflow:hidden; margin:0; font-size:var(--text-body-sm); line-height:1.56; }
.accordion__item.is-open .accordion__body > p{ padding-bottom:var(--space-20); }

.contact{ padding-block:var(--section-gap); background:var(--wash); }
.contact__inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--space-24); align-items:start; }

.contact__info{
  background:var(--brand-carbon);
  color:rgba(255,255,255,.75);
  border-radius:var(--radius-card);
  padding:var(--space-40) var(--space-32);
}
.contact__info h3{ color:#fff; font-size:var(--text-subheading); letter-spacing:var(--tracking-sub); margin-bottom:var(--space-24); }
.contact__item{ display:flex; gap:var(--space-16); margin-bottom:var(--space-20); }
.contact__icon{
  flex-shrink:0;
  width:40px; height:40px; border-radius:var(--radius-button); display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:var(--brand-glow); font-size:15px;
}
.contact__item small{
  display:block; font-size:var(--text-eyebrow); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.contact__item strong{
  font-family:var(--font-body); font-size:15px; font-weight:var(--fw-bold);
  color:#fff; display:block; word-break:break-word; line-height:1.5;
}
.contact__item a:hover strong{ color:var(--brand-glow); }
.contact__social{
  display:flex; gap:var(--space-8);
  margin-top:var(--space-24); padding-top:var(--space-20);
  border-top:1px solid rgba(255,255,255,.12);
}
.contact__social a{
  width:36px; height:36px; border-radius:var(--radius-button); display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff;
  transition:background var(--dur) var(--ease);
}
.contact__social a:hover{ background:var(--brand-vivid); color:var(--ink-deep); }

.contact__form{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-16);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:var(--space-32);
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-body); font-size:var(--text-eyebrow);
  font-weight:var(--fw-bold); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-muted);
}
.field label .req{ color:var(--color-error); }
.field input, .field select, .field textarea{
  border:1px solid var(--border-field); border-radius:var(--radius-button);
  padding:var(--space-12); background:var(--canvas);
  font-size:var(--text-body-sm); color:var(--heading); outline:none;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brand-green); background:var(--card);
  box-shadow:var(--shadow-focus);
}
.field.has-error input, .field.has-error textarea{ border-color:var(--color-error); }
.field__error{ font-size:13px; color:var(--color-error); }
.contact__submit{ display:flex; flex-direction:row; align-items:center; gap:var(--space-20); flex-wrap:wrap; }
.contact__note{ margin:0; font-size:var(--text-caption); color:var(--text-muted); }

.form-msg{
  grid-column:1 / -1; display:none;
  padding:var(--space-12) var(--space-16); border-radius:var(--radius-button);
  font-size:15px; background:var(--cool-wash); color:var(--heading);
}
.form-msg.is-visible{ display:block; }
.form-msg--error{ background:rgba(201,52,58,.10); color:var(--color-error); }

.hp-field{
  position:absolute !important;
  left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}