:root{
  --blue:#16559a;
  --blue-2:#2769c7;
  --navy:#07152c;
  --navy-2:#0c2348;
  --orange:#f57a23;
  --ink:#132033;
  --muted:#667085;
  --paper:#ffffff;
  --soft:#f6f8fb;
  --line:#e7ecf2;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}

header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo img{display:block;width:182px;max-height:50px;object-fit:contain}
.links{display:flex;align-items:center;gap:28px;font-size:.95rem;color:#475467}
.links a:hover{color:var(--blue)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:13px 20px;font-weight:700;
  transition:.2s ease;
}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(.98)}
.btn-outline{border:1px solid rgba(255,255,255,.34);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.08)}

.hero{
  min-height:700px; position:relative; display:grid; align-items:center; overflow:hidden;
  background:
    linear-gradient(90deg, rgba(4,14,34,.97) 0%, rgba(5,18,43,.91) 42%, rgba(5,18,43,.62) 70%, rgba(5,18,43,.44) 100%),
    url('image-aae72ce71af49298.jpg') center/cover no-repeat;
}
.hero-inner{position:relative;z-index:2;padding:96px 0 108px}
.kicker{
  display:inline-flex;align-items:center;gap:10px;color:#b9d3f2;
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
}
.kicker:before{content:"";width:34px;height:2px;background:var(--orange)}
.hero h1{
  margin:18px 0 22px;color:#fff;max-width:920px;
  font-size:clamp(3.2rem,7vw,6.6rem);letter-spacing:-.055em;
  line-height:.94;font-weight:760;
}
.hero h1 span{color:var(--orange)}
.hero .lead{
  max-width:770px;color:#dbe5f1;font-size:clamp(1.15rem,2vw,1.42rem);margin:0;
}
.brandline{margin-top:26px;color:#a9bdd5;font-size:.95rem}
.brandline b:first-child{color:#dce9f7}
.brandline b:last-child{color:#ffb171}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

.statement{padding:88px 0 82px;background:#fff}
.statement-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.statement h2{
  font-size:clamp(2.1rem,4vw,3.7rem);line-height:1.02;letter-spacing:-.042em;margin:0;color:#122033;
}
.statement p{font-size:1.14rem;color:var(--muted);margin:0 0 18px}
.promise{margin-top:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.promise div{border-top:3px solid var(--blue);padding-top:18px}
.promise div:last-child{border-top-color:var(--orange)}
.promise strong{font-size:1.23rem;display:block;margin-bottom:4px}
.promise span{color:var(--muted);font-size:.95rem}

.process{background:var(--soft);padding:90px 0}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:40px}
.section-head h2{margin:0;font-size:clamp(2.1rem,4vw,3.45rem);letter-spacing:-.04em}
.section-head p{margin:0;max-width:610px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;min-height:254px;
  box-shadow:0 10px 30px rgba(20,40,70,.045);
}
.card .n{color:var(--orange);font-size:.78rem;letter-spacing:.14em;font-weight:900}
.card h3{font-size:1.42rem;margin:18px 0 10px;line-height:1.2}
.card p{margin:0;color:var(--muted)}

.scope{padding:90px 0;background:#fff}
.scope-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.scope-item{padding:26px 0;border-top:1px solid var(--line)}
.scope-item strong{display:block;font-size:1.2rem;margin-bottom:6px;color:#17345a}
.scope-item span{color:var(--muted)}

.proof{padding:94px 0;background:var(--navy);color:#fff}
.proof .section-head h2{color:#fff}
.proof .section-head p{color:#aebed4}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case{
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:28px;
  background:rgba(255,255,255,.035);
}
.case .tag{font-size:.75rem;color:#8ec1ff;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.case h3{font-size:1.25rem;line-height:1.25;margin:14px 0 12px}
.case p{margin:0;color:#b8c6d9}

.senior{padding:94px 0;background:#fff}
.senior-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.bigline{font-size:clamp(2.25rem,4.6vw,4.5rem);line-height:1;letter-spacing:-.045em;margin:0}
.bigline span{color:var(--orange)}
.senior-copy p{color:var(--muted);font-size:1.08rem;margin:0 0 18px}
.fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.fact{padding-top:14px;border-top:1px solid var(--line)}
.fact strong{display:block;font-size:1.35rem;color:var(--blue)}
.fact span{font-size:.9rem;color:var(--muted)}

.close{
  padding:104px 0;
  background:linear-gradient(135deg,#0b2347,#123d78);
  color:#fff;
}
.close h2{
  font-size:clamp(2.5rem,5vw,4.8rem);line-height:.98;letter-spacing:-.045em;
  margin:0 0 20px;max-width:940px;
}
.close p{font-size:1.15rem;color:#c5d5e8;max-width:700px}
.close .btn{margin-top:18px}

footer{background:#061126;color:#9cafc7;padding:26px 0}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.9rem}
.foot strong{color:#fff}

@media(max-width:900px){
  .links a:not(.btn){display:none}
  .statement-grid,.senior-grid{grid-template-columns:1fr;gap:36px}
  .cards,.case-grid,.scope-grid{grid-template-columns:1fr}
  .section-head{display:block}
  .section-head p{margin-top:12px}
  .fact-row{grid-template-columns:repeat(3,1fr)}
  .hero{min-height:630px}
}
@media(max-width:560px){
  .wrap{width:min(var(--max),calc(100% - 30px))}
  .logo img{width:150px}
  .nav{min-height:68px}
  .hero-inner{padding:76px 0 86px}
  .hero h1{font-size:3rem}
  .promise,.fact-row{grid-template-columns:1fr}
}

/* --- Casos por sector --- */
.sector-cases{
  padding:96px 0;
  background:#fff;
}
.sector-cases .sector-intro{
  max-width:780px;
  color:var(--muted);
  font-size:1.08rem;
  margin:0 0 42px;
}
.sector-grid{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.sector-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  color:inherit;
  text-align:center;
}
.sector-visual{
  height:150px;
  display:flex;
  align-items:end;
  justify-content:center;
  padding:8px;
  border-radius:18px;
  transition:.22s ease;
}
.sector-visual img{
  max-width:100%;
  max-height:140px;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(7,21,44,.12));
  transition:.22s ease;
}
.sector-name{
  margin-top:14px;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.03em;
  color:#17345a;
}
.sector-btn:hover .sector-visual,
.sector-btn.active .sector-visual{
  background:#f6f8fb;
  transform:translateY(-2px);
}
.sector-btn:hover img,
.sector-btn.active img{
  transform:scale(1.025);
}
.sector-btn.active .sector-name{
  color:var(--orange);
}
.case-panel{
  margin-top:38px;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:#f8fafc;
  display:none;
}
.case-panel.open{display:grid;grid-template-columns:1.05fr .95fr}
.case-copy{padding:34px 36px}
.case-copy .eyeline{
  color:var(--orange);
  font-size:.76rem;
  letter-spacing:.14em;
  font-weight:900;
  text-transform:uppercase;
}
.case-copy h3{
  margin:10px 0 12px;
  font-size:clamp(1.65rem,3vw,2.6rem);
  line-height:1.05;
  letter-spacing:-.035em;
}
.case-copy p{color:var(--muted);margin:0 0 18px}
.case-metrics{
  padding:34px 36px;
  background:var(--navy);
  color:#fff;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-content:center;
}
.metric{
  border-top:2px solid rgba(255,255,255,.18);
  padding-top:14px;
}
.metric strong{
  display:block;
  font-size:2rem;
  color:#fff;
  line-height:1;
  margin-bottom:7px;
}
.metric span{
  color:#b8c6d9;
  font-size:.9rem;
}
.case-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-weight:800;
  color:var(--blue);
}
.case-more:hover{color:var(--orange)}
.pending-note{
  color:var(--muted);
  font-size:.92rem;
  margin-top:10px;
}
@media(max-width:1000px){
  .sector-grid{grid-template-columns:repeat(4,1fr)}
  .sector-visual{height:138px}
}
@media(max-width:700px){
  .sector-grid{grid-template-columns:repeat(2,1fr)}
  .case-panel.open{grid-template-columns:1fr}
  .case-metrics{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:520px){
  .case-metrics{grid-template-columns:1fr}
}


/* --- V4 microinteractions: restrained, hover-only, no looping circus --- */
.sector-visual{
  position:relative;
  overflow:visible;
  isolation:isolate;
}
.sector-base{
  position:relative;
  z-index:2;
}
.sector-btn .sector-visual,
.sector-btn .sector-base{
  transition:transform .28s cubic-bezier(.2,.75,.25,1), filter .28s ease, background .28s ease;
}

/* HOTEL: a handful of windows softly light up */
.hotel-lights{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}
.hotel-lights i{
  position:absolute;
  width:7px;
  height:9px;
  border-radius:1px;
  background:rgba(244,160,61,0);
  box-shadow:0 0 0 rgba(244,160,61,0);
  transition:background .25s ease, box-shadow .25s ease;
}
.hotel-lights i:nth-child(1){left:34%;top:33%}
.hotel-lights i:nth-child(2){left:43%;top:39%}
.hotel-lights i:nth-child(3){left:51%;top:32%}
.hotel-lights i:nth-child(4){left:58%;top:44%}
.hotel-lights i:nth-child(5){left:65%;top:36%}
.hotel-lights i:nth-child(6){left:47%;top:52%}
.sector-hoteles:hover .hotel-lights i,
.sector-btn.active .sector-hoteles .hotel-lights i{
  background:rgba(244,160,61,.88);
  box-shadow:0 0 10px rgba(244,160,61,.55);
}

/* CRUISE: three tiny puffs, only while hovered */
.smoke{
  position:absolute;
  z-index:5;
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(171,185,200,.5);
  filter:blur(.3px);
  opacity:0;
  left:63%;
  top:18%;
  pointer-events:none;
}
.sector-cruceros:hover .smoke-1{animation:puff 1.55s ease-out infinite}
.sector-cruceros:hover .smoke-2{animation:puff 1.55s .42s ease-out infinite}
.sector-cruceros:hover .smoke-3{animation:puff 1.55s .84s ease-out infinite}
@keyframes puff{
  0%{transform:translate(0,0) scale(.55);opacity:0}
  15%{opacity:.55}
  70%{opacity:.25}
  100%{transform:translate(11px,-27px) scale(1.55);opacity:0}
}

/* LABS: microscope lens catches a brief glint */
.lab-glint{
  position:absolute;
  z-index:5;
  width:34px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  transform:rotate(-34deg);
  left:39%;
  top:41%;
  opacity:0;
}
.sector-laboratorios:hover .lab-glint{animation:glint .8s ease-out 1}
@keyframes glint{
  0%{opacity:0;transform:translate(-12px,7px) rotate(-34deg)}
  35%{opacity:.95}
  100%{opacity:0;transform:translate(20px,-11px) rotate(-34deg)}
}

/* INSURANCE: protective halo, subtle and single-beat */
.shield-halo{
  position:absolute;
  z-index:1;
  width:88px;
  height:88px;
  border-radius:50%;
  border:2px solid rgba(244,160,61,0);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.8);
  opacity:0;
}
.sector-seguros:hover .shield-halo{animation:halo .75s ease-out 1}
@keyframes halo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}
  30%{opacity:.45;border-color:rgba(244,160,61,.48)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}

/* AUTOMOTIVE: headlamps gently wake */
.headlight{
  position:absolute;
  z-index:5;
  width:13px;
  height:5px;
  border-radius:999px;
  background:rgba(244,160,61,0);
  box-shadow:0 0 0 rgba(244,160,61,0);
  top:61%;
  transition:.25s ease;
}
.hl-left{left:26%}
.hl-right{right:22%}
.sector-automocion:hover .headlight{
  background:rgba(244,160,61,.95);
  box-shadow:0 0 14px rgba(244,160,61,.65);
}

/* TECHNOLOGY: restrained data-node pulses */
.data-pulse{
  position:absolute;
  z-index:5;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(244,160,61,.95);
  box-shadow:0 0 0 0 rgba(244,160,61,.35);
  opacity:0;
}
.dp1{left:36%;top:32%}
.dp2{left:58%;top:47%}
.dp3{left:47%;top:62%}
.sector-tecnologia:hover .dp1{animation:dataPing 1.1s ease-out 0s infinite}
.sector-tecnologia:hover .dp2{animation:dataPing 1.1s ease-out .24s infinite}
.sector-tecnologia:hover .dp3{animation:dataPing 1.1s ease-out .48s infinite}
@keyframes dataPing{
  0%{opacity:.8;box-shadow:0 0 0 0 rgba(244,160,61,.35)}
  70%{opacity:.45;box-shadow:0 0 0 10px rgba(244,160,61,0)}
  100%{opacity:0}
}

/* RETAIL: a very small flap-opening illusion from the same source image */
.retail-flap{
  position:absolute;
  z-index:5;
  left:8px;
  top:8px;
  max-width:calc(100% - 16px);
  max-height:140px;
  object-fit:contain;
  clip-path:polygon(26% 0,74% 0,72% 43%,28% 43%);
  transform-origin:50% 43%;
  transition:transform .38s cubic-bezier(.2,.8,.3,1), filter .25s ease;
  pointer-events:none;
}
.sector-retail:hover .retail-flap{
  transform:perspective(260px) rotateX(-18deg) translateY(-2px);
  filter:brightness(1.04);
}

/* Overall touch: hover lifts a fraction, active selection remains calm */
.sector-btn:hover .sector-base{transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){
  .smoke,.lab-glint,.shield-halo,.data-pulse{animation:none!important}
  .sector-btn *, .sector-btn .sector-visual, .sector-btn .sector-base{transition:none!important}
}


/* --- V5 corrections --- */

/* Hotel: remove stray floating windows and use a few warm glows well inside the façade */
.hotel-lights i{
  width:10px;
  height:14px;
  border-radius:2px;
}
.hotel-lights i:nth-child(1){left:36%;top:60%}
.hotel-lights i:nth-child(2){left:45%;top:60%}
.hotel-lights i:nth-child(3){left:54%;top:60%}
.hotel-lights i:nth-child(4){left:39%;top:73%}
.hotel-lights i:nth-child(5){left:50%;top:73%}
.hotel-lights i:nth-child(6){left:61%;top:73%}
.sector-hoteles:hover .hotel-lights i,
.sector-btn.active .sector-hoteles .hotel-lights i{
  background:rgba(244,160,61,.72);
  box-shadow:0 0 9px rgba(244,160,61,.42);
}

/* Cruise: smoke must trail behind the ship, not run ahead like a politician before elections */
.smoke{
  left:30%;
  top:21%;
  background:rgba(181,189,198,.5);
}
.sector-cruceros:hover .smoke-1{animation:puffBack 1.55s ease-out infinite}
.sector-cruceros:hover .smoke-2{animation:puffBack 1.55s .42s ease-out infinite}
.sector-cruceros:hover .smoke-3{animation:puffBack 1.55s .84s ease-out infinite}
@keyframes puffBack{
  0%{transform:translate(0,0) scale(.55);opacity:0}
  18%{opacity:.5}
  72%{opacity:.22}
  100%{transform:translate(-22px,-18px) scale(1.55);opacity:0}
}

/* Automotive: explicit headlight glow in the correct places */
.headlight{
  width:18px;
  height:6px;
  top:58%;
  background:rgba(244,160,61,0);
  box-shadow:0 0 0 rgba(244,160,61,0);
}
.hl-left{left:30%}
.hl-right{left:50%}
.sector-automocion:hover .headlight{
  background:rgba(255,203,113,.98);
  box-shadow:0 0 10px rgba(244,160,61,.85), 0 0 20px rgba(244,160,61,.38);
}
.sector-automocion:hover .hl-left{transform:skewX(-18deg)}
.sector-automocion:hover .hl-right{transform:skewX(-8deg)}

/* Technology: replace odd pulses with a small Power BI badge appearing on the screen */
.data-pulse{display:none}
.bi-badge{
  position:absolute;
  z-index:6;
  right:12%;
  bottom:24%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(7,21,44,.08);
  box-shadow:0 8px 20px rgba(7,21,44,.16);
  opacity:0;
  transform:translateY(5px) scale(.96);
  transition:opacity .24s ease, transform .24s ease;
}
.bi-bars{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:14px;
}
.bi-bars i{
  display:block;
  width:6px;
  border-radius:2px 2px 0 0;
  background:#f2c811;
}
.bi-bars i:nth-child(1){height:7px}
.bi-bars i:nth-child(2){height:11px}
.bi-bars i:nth-child(3){height:14px}
.bi-text{
  font-size:.62rem;
  font-weight:800;
  color:#25364c;
  letter-spacing:.02em;
}
.sector-tecnologia:hover .bi-badge{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Retail: make the opening motion visible */
.retail-flap{
  clip-path:polygon(11% 26%,89% 26%,89% 54%,11% 54%);
  transform-origin:50% 26%;
  transition:transform .38s cubic-bezier(.2,.8,.3,1), filter .25s ease, opacity .2s ease;
  opacity:.98;
}
.sector-retail:hover .retail-flap{
  transform:perspective(320px) rotateX(-28deg) translateY(-10px);
  filter:brightness(1.06);
}
.sector-retail:hover .sector-base{
  transform:translateY(1px);
}

/* Keep the rest calm */
footer .foot span:last-child{
  font-style:normal;
}


/* --- V6 precision corrections --- */

/* HOTEL
   The previous squares looked pasted on. These are perspective-shaped panes:
   left wing slants one way, right wing the opposite, centre remains frontal. */
.hotel-lights i{
  width:7px;
  height:10px;
  border-radius:1px;
  background:rgba(244,160,61,0);
  box-shadow:none;
  transform-origin:center;
}
.hotel-lights i:nth-child(1){
  left:30%; top:61%;
  clip-path:polygon(18% 6%,100% 0,100% 100%,0 92%);
  transform:skewY(-5deg) rotate(-1.5deg);
}
.hotel-lights i:nth-child(2){
  left:37%; top:66%;
  clip-path:polygon(16% 4%,100% 0,100% 100%,0 94%);
  transform:skewY(-4deg);
}
.hotel-lights i:nth-child(3){
  left:47%; top:59%;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.hotel-lights i:nth-child(4){
  left:54%; top:67%;
  clip-path:polygon(0 0,84% 5%,100% 94%,0 100%);
  transform:skewY(4deg);
}
.hotel-lights i:nth-child(5){
  left:62%; top:61%;
  clip-path:polygon(0 0,82% 6%,100% 92%,0 100%);
  transform:skewY(5deg) rotate(1deg);
}
.hotel-lights i:nth-child(6){
  left:49%; top:72%;
  width:8px; height:12px;
}
.sector-hoteles:hover .hotel-lights i,
.sector-btn.active .sector-hoteles .hotel-lights i{
  background:rgba(244,160,61,.76);
  box-shadow:0 0 6px rgba(244,160,61,.34);
}

/* AUTOMOTIVE
   Position light overlays over the actual LED strips in the rendered car. */
.headlight{
  position:absolute;
  z-index:6;
  height:4px;
  border-radius:999px;
  background:rgba(255,222,157,0);
  box-shadow:none;
  top:57.2%;
  opacity:0;
  transition:opacity .2s ease, box-shadow .2s ease, background .2s ease;
}
.hl-left{
  left:22.8%;
  width:17.5%;
  transform:rotate(-5deg);
  clip-path:polygon(0 35%,100% 0,91% 100%,8% 90%);
}
.hl-right{
  left:46.2%;
  width:16.5%;
  transform:rotate(-2deg);
  clip-path:polygon(0 18%,100% 0,92% 100%,7% 92%);
}
.sector-automocion:hover .headlight{
  opacity:1;
  background:rgba(255,229,180,.96);
  box-shadow:
    0 0 6px rgba(255,219,150,.88),
    0 0 13px rgba(244,160,61,.40);
}

/* TECHNOLOGY
   No floating label. A compact Power BI-like dashboard sits INSIDE the existing screen.
   Perspective and clipping make it read as content on the display, not a sticker. */
.bi-badge{display:none!important}
.bi-screen{
  position:absolute;
  z-index:5;
  left:34.4%;
  top:39.2%;
  width:32.5%;
  height:31.2%;
  overflow:hidden;
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,250,.90));
  border:1px solid rgba(19,52,90,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  transform-origin:center;
  transform:perspective(420px) rotateX(1.2deg) rotateY(-2.6deg) skewX(-.8deg);
  opacity:0;
  transition:opacity .22s ease, filter .22s ease;
  pointer-events:none;
}
.sector-tecnologia:hover .bi-screen{
  opacity:.96;
  filter:saturate(1.05);
}
.bi-chart{position:absolute;display:block}
.bi-bars2{
  left:8%; bottom:12%;
  width:39%; height:52%;
  display:flex; align-items:flex-end; gap:4%;
}
.bi-bars2 i{
  display:block; width:19%;
  background:#f2c811;
  border-radius:1px 1px 0 0;
}
.bi-bars2 i:nth-child(1){height:34%}
.bi-bars2 i:nth-child(2){height:52%}
.bi-bars2 i:nth-child(3){height:72%}
.bi-bars2 i:nth-child(4){height:92%}
.bi-line{
  left:9%; top:12%;
  width:39%; height:27%;
}
.bi-line::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(158deg,
    transparent 0 14%,
    #1f4d7a 15% 18%,
    transparent 19% 35%,
    #1f4d7a 36% 39%,
    transparent 40% 55%,
    #1f4d7a 56% 59%,
    transparent 60%);
  opacity:.9;
}
.bi-line i{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:#1f4d7a;
}
.bi-line i:nth-child(1){left:4%; bottom:12%}
.bi-line i:nth-child(2){left:45%; bottom:42%}
.bi-line i:nth-child(3){right:4%; top:6%}
.bi-donut{
  right:8%; top:18%;
  width:35%; aspect-ratio:1/1;
  border-radius:50%;
  background:conic-gradient(#f2c811 0 34%, #153f6d 34% 72%, #d8dde4 72% 100%);
}
.bi-donut::after{
  content:"";
  position:absolute;
  inset:28%;
  border-radius:50%;
  background:rgba(250,250,250,.96);
}

/* RETAIL
   Stronger two-part motion: lid rotates, body settles slightly.
   The copied upper portion is clipped to the actual flap region. */
.retail-flap{
  left:8px;
  top:8px;
  max-width:calc(100% - 16px);
  max-height:140px;
  clip-path:polygon(13% 27%,87% 27%,86% 53%,14% 53%);
  transform-origin:50% 28%;
  opacity:1;
  transition:transform .42s cubic-bezier(.18,.82,.25,1), filter .25s ease;
}
.sector-retail:hover .retail-flap{
  transform:perspective(360px) rotateX(-34deg) translateY(-12px) scaleY(.98);
  filter:brightness(1.07);
}
.sector-retail:hover .sector-base{
  transform:translateY(2px) scale(.995);
}

/* CRUISE smoke already corrected in V5; keep the aft direction. */


/* --- V7 cleanup: only cruise smoke + laboratory glint remain animated --- */
.hotel-lights,
.shield-halo,
.headlight,
.bi-badge,
.bi-screen,
.data-pulse,
.retail-flap{
  display:none!important;
}
.sector-hoteles:hover .sector-base,
.sector-seguros:hover .sector-base,
.sector-automocion:hover .sector-base,
.sector-tecnologia:hover .sector-base,
.sector-retail:hover .sector-base{
  transform:none!important;
  filter:drop-shadow(0 10px 18px rgba(7,21,44,.12))!important;
}
.sector-hoteles:hover .sector-visual,
.sector-seguros:hover .sector-visual,
.sector-automocion:hover .sector-visual,
.sector-tecnologia:hover .sector-visual,
.sector-retail:hover .sector-visual{
  transform:none!important;
}


/* --- V8: four very restrained hover effects --- */

/* HOTEL: warm glow only around the yellow/copper dome at the top.
   No fake window lights, no geometry overlays. */
.hotel-dome-glow{
  position:absolute;
  z-index:1;
  left:47.4%;
  top:7.5%;
  width:17%;
  height:18%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 60%,
    rgba(245,165,58,0) 0 22%,
    rgba(245,165,58,.16) 36%,
    rgba(245,165,58,.08) 58%,
    rgba(245,165,58,0) 76%);
  filter:blur(4px);
  opacity:0;
  transform:translate(-50%,0) scale(.92);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.sector-hoteles:hover .hotel-dome-glow{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

/* INSURANCE + TECHNOLOGY: one brief, nearly imperceptible reflected-light pass.
   Runs once per hover, not continuously. */
.light-sweep{
  position:absolute;
  z-index:6;
  top:8%;
  bottom:10%;
  width:18%;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.18) 48%,
    rgba(255,255,255,.06) 58%,
    transparent 78%);
  filter:blur(1.2px);
  transform:translateX(-180%) skewX(-14deg);
}
.insurance-sweep{
  left:14%;
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);
}
.tech-sweep{
  left:10%;
  top:18%;
  bottom:16%;
  clip-path:polygon(10% 0,95% 0,100% 100%,0 100%);
}
.sector-seguros:hover .insurance-sweep,
.sector-tecnologia:hover .tech-sweep{
  animation:subtleSweep .72s cubic-bezier(.2,.75,.25,1) 1;
}
@keyframes subtleSweep{
  0%{opacity:0;transform:translateX(-180%) skewX(-14deg)}
  18%{opacity:.28}
  56%{opacity:.18}
  100%{opacity:0;transform:translateX(420%) skewX(-14deg)}
}

/* AUTOMOTIVE: a soft contact shadow appears under the car.
   It should read as weight, not as a floating sticker. */
.car-ground-shadow{
  position:absolute;
  z-index:1;
  left:15%;
  right:13%;
  bottom:14%;
  height:12%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(7,21,44,.24) 0%,
    rgba(7,21,44,.12) 42%,
    rgba(7,21,44,0) 74%);
  filter:blur(6px);
  opacity:0;
  transform:scaleX(.86) scaleY(.72);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.sector-automocion:hover .car-ground-shadow{
  opacity:1;
  transform:scaleX(1) scaleY(1);
}

/* Ensure these effects do not move the underlying icons. */
.sector-hoteles:hover .sector-base,
.sector-seguros:hover .sector-base,
.sector-automocion:hover .sector-base,
.sector-tecnologia:hover .sector-base{
  transform:none!important;
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce){
  .insurance-sweep,
  .tech-sweep{
    display:none!important;
  }
  .hotel-dome-glow,
  .car-ground-shadow{
    transition:none!important;
  }
}


/* Preserve approved alignment and full case narrative. */
main[id],section[id],details[id]{scroll-margin-top:100px}
#case-panel{scroll-margin-top:100px}
.links a{white-space:nowrap}
.statement-grid,.senior-grid,.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.section-head h2{line-height:1.08}
.card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
.statement-grid > div + div{padding-top:clamp(.42rem,.8vw,.74rem)}
.section-head > p{padding-top:clamp(.42rem,.8vw,.69rem)}
.senior-copy{padding-top:clamp(.45rem,.92vw,.9rem)}
.case-details{margin-top:24px;padding:24px 36px;border:1px solid var(--line);border-radius:18px;background:#fff}
.case-more:focus-visible,.sector-btn:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
.case-story{max-width:780px;color:var(--muted)}
.case-metrics.two-metrics{grid-template-columns:repeat(2,minmax(0,1fr));align-self:start}
.case-metrics.two-metrics .metric strong{overflow-wrap:anywhere}
.case-metrics.four-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-metrics.four-metrics .metric strong{overflow-wrap:anywhere}
@media(max-width:700px){.case-metrics.four-metrics{grid-template-columns:1fr}}
#caso-seguros{min-width:0}
.tirea-table-scroll{max-width:100%;overflow-x:auto;margin:20px 0 24px;border:1px solid var(--line);border-radius:10px}
.tirea-table{width:100%;min-width:700px;border-collapse:collapse;background:#fff;font-variant-numeric:tabular-nums;color:var(--ink)}
.tirea-table th,.tirea-table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.tirea-table th:first-child{text-align:left;white-space:normal;min-width:200px}
.tirea-table thead th{background:var(--blue);color:#fff}
.tirea-table tbody td{font-weight:700}
.tirea-table tbody td:last-child{background:#edf4fb;color:var(--blue)}
.tirea-table thead th:last-child{background:#10477f}
.tirea-table .annual-growth{font-size:.875rem;color:var(--muted)}
.tirea-table .annual-growth th,.tirea-table .annual-growth td{font-weight:500}
.tirea-source{font-size:.8rem;color:var(--muted)}
@media(max-width:700px){.case-metrics.two-metrics{grid-template-columns:1fr}}
.case-story h4{font-size:1.15rem;color:var(--ink);margin:24px 0 8px}
.case-story p{margin:0 0 16px}
.case-panel:not(:has(.metric)){grid-template-columns:1fr}
@media(max-width:900px){
.statement-grid,.senior-grid{grid-template-columns:1fr;gap:36px}
.section-head{display:block}
.statement-grid > div + div,.section-head > p,.senior-copy{padding-top:0}
.card{display:block;grid-row:auto}
}


/* Herramientas: capacidad técnica aplicada al negocio. */
.tools-section{padding:96px 0;background:var(--soft);scroll-margin-top:100px}
.tools-figure{margin:28px 0 36px}
.tools-figure img{display:block;width:100%;height:auto}
.tools-intro{max-width:870px;margin:0 auto;text-align:center;color:var(--muted);font-size:1.08rem}
.tools-intro .tools-lead{color:var(--ink);font-size:1.3rem;line-height:1.45}
.tools-logos{list-style:none;padding:28px 0;margin:40px 0 28px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tools-logos li{min-width:0;min-height:106px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:12px 8px}
.tools-logos img{width:106px;height:36px;object-fit:contain}
.tools-logos span{font-size:.9rem;color:var(--muted);text-align:center}
.tools-logos .tools-featured{background:#eaf1fa;border-radius:10px}
.tools-logos .tools-featured img{width:122px;height:46px}
.tools-logos .tools-featured span{color:var(--blue);font-weight:700}
.tools-purpose{max-width:850px;margin:0 auto;color:var(--blue);text-align:center;font-size:1.05rem;line-height:1.65}
@media(max-width:900px){.tools-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.tools-section{padding:64px 0}.tools-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}.tools-logos img{max-width:100%}.tools-intro{text-align:left}.tools-purpose{text-align:left}}

.tools-logo-frame{display:flex;align-items:center;justify-content:center;width:100%;height:46px;overflow:hidden}
.tools-logos .tools-padded-logo{width:106px;height:106px;max-width:none;flex-shrink:0}