/* Soluciones — índice y páginas de línea. Se carga después de inicio.css,
   que aporta barra, menú, pie, botones y .wrap. */

/* ---------- Hero del índice y de las líneas ---------- */

.shero{
  position:relative;
  overflow:hidden;
  padding-top:var(--nav-h);
  background:var(--white);
}

.shero__foto{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:58%;
  height:100%;
  object-fit:cover;
  animation:entra 1100ms cubic-bezier(.22,1,.36,1) both;
}

.shero__velo{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:62%;
  background:linear-gradient(to bottom,rgba(255,255,255,.72) 0%,rgba(255,255,255,.28) 26%,rgba(255,255,255,0) 46%),linear-gradient(to right,var(--white) 0%,rgba(255,255,255,.86) 16%,rgba(255,255,255,.34) 42%,rgba(255,255,255,.06) 70%,rgba(255,255,255,0) 100%);
}

.shero__in{
  position:relative;
  z-index:2;
  display:grid;
  align-content:center;
  min-height:clamp(320px,44vh,430px);
  padding-block:clamp(36px,6vh,68px);
}

.shero__copy{max-width:min(52%,54ch)}

.shero__copy h1{
  margin-block:var(--sp-4) var(--sp-4);
  font-size:clamp(30px,4vw,54px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.1;
}
.shero__copy h1 em{font-style:normal;color:var(--blue)}

.shero__copy p{color:var(--g-700);font-size:var(--fs-sm);max-width:52ch}

.miga{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--g-500);
}
.miga a{transition:color var(--tr-fast)}
.miga a:hover{color:var(--black)}
.miga i{font-style:normal;color:var(--g-300)}

.shero .vert{top:clamp(84px,13vh,120px)}

/* ---------- Pestañas de línea ---------- */

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(16px,2.4vw,34px);
  border-bottom:1px solid var(--g-200);
}

.tabs a{
  padding-block:var(--sp-4);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--g-700);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color var(--tr-fast),border-color var(--tr-fast);
}
.tabs a:hover{color:var(--black)}
.tabs a[aria-current]{color:var(--blue-dark);border-bottom-color:var(--blue)}

/* ---------- Tres cifras de la línea ---------- */

.tres{background:var(--g-050)}

.tres__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-block:clamp(24px,4vh,36px);
}

.tres__i{
  display:grid;
  gap:2px;
  justify-items:center;
  text-align:center;
  padding-inline:var(--sp-4);
  border-left:1px solid var(--g-200);
}
.tres__i:first-child{border-left:0}

.tres__n{
  font-family:var(--font-display);
  font-size:clamp(22px,2.5vw,30px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.tres__eq{font-size:var(--fs-sm);color:var(--g-700);font-variant-numeric:tabular-nums}
.tres__t{font-size:var(--fs-xs);color:var(--g-500)}

/* ---------- Lista de las cinco líneas ---------- */

.lineas{padding-block:clamp(36px,6vh,64px) clamp(44px,7vh,80px)}

.lin{
  display:grid;
  grid-template-columns:320px minmax(0,1fr) minmax(0,1.35fr) auto;
  align-items:center;
  gap:clamp(18px,2.6vw,40px);
  padding-block:clamp(18px,2.6vh,26px);
  border-bottom:1px solid var(--g-200);
}
.lin:first-child{border-top:1px solid var(--g-200)}

.lin__foto{
  overflow:hidden;
  background:var(--g-100);
  aspect-ratio:16/10;
}
.lin__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--tr-slow);
}
.lin:hover .lin__foto img{transform:scale(1.05)}

.lin__id{display:grid;gap:3px;min-width:0}
.lin__no{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--g-700);
  letter-spacing:.08em;
}
.lin__n{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.15;
}
.lin__d{font-size:var(--fs-sm);color:var(--g-700);margin-top:2px}

.lin__t{font-size:var(--fs-sm);color:var(--g-700);max-width:46ch}

.lin__go{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--g-300);
  border-radius:50%;
  color:var(--g-700);
  transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);
}
.lin:hover .lin__go{background:var(--blue);border-color:var(--blue);color:var(--white)}

/* ---------- Familias de producto ---------- */

.fam{padding-block:clamp(44px,7vh,80px)}

.fam__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:end;
  gap:var(--sp-6);
  margin-bottom:clamp(24px,4vh,40px);
}
.fam__head h2{
  margin-top:var(--sp-3);
  font-size:clamp(24px,2.9vw,38px);
  letter-spacing:-.025em;
  line-height:1.14;
}
.fam__head p{font-size:var(--fs-sm);color:var(--g-700);max-width:44ch}

.marco{overflow-x:auto;border:1px solid var(--g-200)}

.datos{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
  min-width:720px;
}
.datos th,.datos td{
  padding:var(--sp-3) var(--sp-4);
  text-align:left;
  border-bottom:1px solid var(--g-200);
  white-space:nowrap;
}
.datos thead th{
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--g-500);
  background:var(--g-050);
}
.datos tbody th{font-weight:600;font-variant-numeric:tabular-nums}
.datos tbody td{color:var(--g-700);font-variant-numeric:tabular-nums}
.datos tbody tr:last-child th,.datos tbody tr:last-child td{border-bottom:0}
.datos tbody tr:hover th,.datos tbody tr:hover td{background:var(--g-050)}

.fam__nota{
  margin-top:var(--sp-4);
  font-size:var(--fs-xs);
  color:var(--g-500);
  max-width:76ch;
}

/* ---------- Aplicaciones ---------- */

.tipo{padding-block:clamp(44px,7vh,80px)}

.tipo__head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--sp-4);
  align-items:end;
  margin-bottom:clamp(24px,3.4vh,40px);
}
.tipo__head h2{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
}
.tipo__head h2 em{font-style:normal;color:var(--blue-dark)}
.tipo__head p{font-size:var(--fs-sm);color:var(--g-700);max-width:44ch}

.tipo__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px);
}

.tipo__c{display:grid;gap:var(--sp-2);align-content:start}

.tipo__foto{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:2px;
  background:var(--g-100);
  aspect-ratio:4/3;
}
.tipo__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tipo__pronto{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--g-700);
}

.tipo__n{
  margin-top:var(--sp-3);
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
}
.tipo__d{font-size:var(--fs-sm);color:var(--g-700);max-width:42ch}

.apps{padding-bottom:clamp(44px,7vh,80px)}

.apps__in{
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(20px,3vw,48px);
  align-items:stretch;
}

.apps__foto{
  position:relative;
  overflow:hidden;
  background:var(--g-100);
  min-height:clamp(260px,36vh,380px);
}
.apps__foto img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.apps__foto p{
  position:absolute;
  left:clamp(18px,2.4vw,28px);
  right:clamp(18px,2.4vw,28px);
  bottom:clamp(18px,2.4vw,28px);
  z-index:2;
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:600;
  line-height:1.25;
  color:var(--white);
  text-shadow:0 1px 18px rgba(5,5,5,.7);
}
.apps__foto::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to top,rgba(5,5,5,.62) 0%,rgba(5,5,5,.18) 42%,rgba(5,5,5,0) 72%);
}

.apps__lado{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:clamp(22px,3vw,36px);
  background:var(--g-050);
  position:relative;
}
.apps__lado::before{
  content:'';
  position:absolute;
  top:0;
  left:clamp(22px,3vw,36px);
  width:44px;
  height:2px;
  background:var(--blue);
}
.apps__lado h2{font-size:var(--fs-xl);letter-spacing:-.02em}
.apps__lado > p{font-size:var(--fs-sm);color:var(--g-700);max-width:52ch}

.apps__lista{display:flex;flex-direction:column;margin-top:var(--sp-2)}

.apps__lista a{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-block:var(--sp-3) calc(var(--sp-3) + 1px);
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--g-700);
  transition:color var(--tr-fast),transform var(--tr-fast);
}
.apps__lista a::after,
.apps__lista a:first-child::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:var(--g-200);
  transition:transform var(--tr-fast);
}
.apps__lista a::after{bottom:0}
.apps__lista a:first-child{padding-top:calc(var(--sp-3) + 1px)}
.apps__lista a:first-child::before{top:0}
.apps__lista a:hover{color:var(--blue);transform:translateX(var(--sp-2))}
.apps__lista a:hover::after,
.apps__lista a:first-child:hover::before{transform:translateX(calc(-1 * var(--sp-2)))}
.apps__lista svg{flex:none;opacity:.55}
.apps__lista a:hover svg{opacity:1}

/* ---------- Cierre con foto ---------- */

.cierre{padding-bottom:clamp(48px,7vh,88px)}

.cierre__in{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,44%);
  align-items:center;
  gap:clamp(20px,3vw,48px);
  background:var(--g-100);
}

.cierre__copy{
  display:grid;
  gap:var(--sp-3);
  padding:clamp(28px,4vw,52px);
}
.cierre__copy h2{
  font-size:clamp(24px,2.9vw,38px);
  letter-spacing:-.025em;
  line-height:1.14;
}
.cierre__copy h2 em{font-style:normal;color:var(--blue)}
.cierre__copy p{font-size:var(--fs-sm);color:var(--g-700);max-width:44ch}

.cierre__acciones{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-3)}
.cierre__acciones .btn-line{background:var(--white)}

.cierre__foto{
  position:relative;
  align-self:stretch;
  min-height:clamp(180px,26vh,260px);
  overflow:hidden;
}
.cierre__foto img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.cierre__lista,.cierre__plano{
  align-self:center;
  padding:clamp(28px,4vw,52px) clamp(28px,4vw,52px) clamp(28px,4vw,52px) 0;
}
.cierre__rot{
  margin:0 0 14px;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--g-800);
}
.cierre__lista ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--g-300)}
.cierre__lista li{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:baseline;
  gap:8px;
  padding:13px 0;
  border-bottom:1px solid var(--g-300);
  font-size:15px;
  line-height:1.4;
  color:var(--g-800);
}
.cierre__lista li span{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--blue-dark);
  font-variant-numeric:tabular-nums;
}

.cierre__plano{display:flex;justify-content:center}
.cierre__plano svg{display:block;width:100%;max-width:560px;height:auto}
.cierre__trazo *{fill:none;stroke:var(--g-800);stroke-width:1.5}
.cierre__trazo .cierre__piso{stroke:var(--g-300);stroke-width:1}
.cierre__trazo .cierre__vano{stroke:var(--g-100);stroke-width:3}
.cierre__cota *{stroke:var(--blue-dark);stroke-width:1.25}
.cierre__plano text{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  fill:var(--blue-dark);
}
.cierre__plano .cierre__gris{fill:var(--g-700)}

.cierre--linea .cierre__in{
  grid-template-columns:1fr;
  background:transparent;
  border-block:1px solid var(--g-300);
}
.cierre--linea .cierre__copy{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(24px,4vw,64px);
  padding:clamp(32px,4vw,48px) 0;
}
.cierre--linea .cierre__copy > *{grid-column:1}
.cierre--linea .cierre__acciones{grid-column:2;grid-row:1 / span 3;margin:0}

/* ---------- Responsive ---------- */

@media (max-width:1024px){
  .tipo__head{grid-template-columns:1fr;align-items:start}

  .shero{padding-top:var(--nav-h)}
  /* aqui la foto ya es de ancho completo: no lleva margen negativo */
  .shero__foto{position:relative;width:100%;height:auto;aspect-ratio:16/9;margin-inline:0}
  .shero__velo{display:none}
  .shero__in{min-height:0;padding-block:clamp(28px,5vh,44px) var(--sp-6)}
  .shero__copy{max-width:none}
  .shero .vert{display:none}

  .lin{grid-template-columns:130px minmax(0,1fr) auto;gap:var(--sp-4)}
  .lin__t{grid-column:2/-1;max-width:none;margin-top:var(--sp-2)}

  .fam__head{grid-template-columns:1fr;align-items:start}

  .apps__in{grid-template-columns:1fr}
  .apps__foto{min-height:0;aspect-ratio:16/9}

  .cierre__in{grid-template-columns:1fr}
  .cierre__foto{order:-1;min-height:0;aspect-ratio:16/7}
  .cierre__lista,.cierre__plano{padding:0 clamp(28px,4vw,52px) clamp(28px,4vw,52px)}
}

@media (max-width:768px){
  .cierre--linea .cierre__copy{grid-template-columns:1fr}
  .cierre--linea .cierre__acciones{grid-column:1;grid-row:auto;margin-top:var(--sp-3)}
}

@media (max-width:640px){
  .cierre__plano text{font-size:20px}
  .tipo__grid{grid-template-columns:1fr;gap:var(--sp-6)}

  .tres__grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .tres__i{border-left:0;padding-inline:0}
  .tres__i + .tres__i{padding-top:var(--sp-5);border-top:1px solid var(--g-200)}

  .lin{grid-template-columns:1fr;gap:var(--sp-3)}
  .lin__foto{aspect-ratio:16/9}
  .lin__t{grid-column:auto;margin-top:0}
  .lin__go{display:none}

  .tabs{gap:0 var(--sp-4)}
  .tabs a{padding-block:var(--sp-3);font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .shero__foto{animation:none}
}

.lin--pronto .lin__foto{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--g-050);
  border:1px solid var(--g-200);
}
.lin__pronto{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--g-700);
}
.lin--pronto .lin__go{color:var(--g-500)}
.lin--pronto:hover .lin__go{background:var(--g-700);border-color:var(--g-700);color:var(--white)}

.shero--pronto{border-bottom:1px solid var(--g-200)}
.shero--pronto .shero__in{min-height:clamp(220px,30vh,300px)}
.shero--pronto .shero__copy{max-width:min(64%,60ch)}

.pronto{padding-block:clamp(44px,7vh,88px)}
.pronto__in{display:grid;justify-items:start;max-width:62ch}
.pronto__rot{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-dark);
  margin-bottom:var(--sp-4);
}
.pronto__in h2{
  font-size:clamp(24px,2.9vw,38px);
  letter-spacing:-.025em;
  line-height:1.14;
  margin-bottom:var(--sp-5);
}
.pronto__in p{color:var(--g-700);margin-bottom:var(--sp-4)}
.pronto__in p:last-of-type{margin-bottom:var(--sp-6)}

@media (max-width:900px){
  .shero--pronto .shero__copy{max-width:none}
}

@media (pointer:coarse){
  .shero .eyebrow a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}