/* ============================================================
   TU IDEA DIGITAL — PÁGINAS INTERIORES Y VISOR DE CASOS
   Continúa el sistema de style.css: mismos tokens, mismo radio
   de 2 px, misma retícula de filetes de 1 px, un solo acento.
   ============================================================ */

/* ---------- SALTAR AL CONTENIDO ---------- */
.skip{
  position:fixed; top:10px; left:10px; z-index:9990;
  padding:12px 18px; background:var(--white); color:#08080A;
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; border-radius:var(--r);
  transform:translateY(-160%); transition:transform .3s var(--ease);
}
.skip:focus-visible{ transform:none; }

/* ============================================================
   CABECERA DE PÁGINA INTERIOR
============================================================ */
.phero{
  padding:calc(var(--header-h) + clamp(58px,9vh,120px)) var(--pad) clamp(44px,6vh,86px);
  max-width:var(--maxw); margin:0 auto;
}
.migas{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding-bottom:clamp(20px,2.4vw,32px); margin-bottom:clamp(22px,2.6vw,36px);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2);
}
.migas a{ color:var(--muted); transition:color .3s var(--ease); }
.migas a:hover{ color:var(--white); }
.migas i{ font-style:normal; color:var(--line); }
.migas span:last-child{ color:var(--white); }

.phero__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(38px,7vw,110px); line-height:.92; letter-spacing:-.05em;
  max-width:19ch;
}
.phero__title .outline{
  display:inline-block; color:transparent;
  -webkit-text-stroke:1.2px var(--muted-2);
  transition:-webkit-text-stroke-color .7s var(--ease);
}
.phero__title .outline.is-lit{ -webkit-text-stroke-color:var(--white); }
.phero__lead{
  margin-top:clamp(22px,2.6vw,36px); max-width:62ch;
  font-size:clamp(15px,1.25vw,19px); line-height:1.6; color:var(--muted);
}
.phero__intro{
  margin-top:20px; max-width:68ch; font-size:clamp(14.5px,1.1vw,16.5px);
  line-height:1.65; color:var(--muted);
}
.phero__meta{ margin-top:clamp(28px,3.2vw,48px); }

.phero__datos{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.phero__datos > div{
  padding:20px clamp(16px,1.8vw,28px) 0 0;
  border-right:1px solid var(--line-soft);
}
.phero__datos > div:not(:first-child){ padding-left:clamp(16px,1.8vw,28px); }
.phero__datos > div:last-child{ border-right:none; }
.phero__datos dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:10px;
}
.phero__datos dd{ font-size:14.5px; color:var(--white); line-height:1.45; }
.phero__datos dd a{ border-bottom:1px solid var(--line); transition:border-color .3s var(--ease); }
.phero__datos dd a:hover{ border-bottom-color:var(--accent); }

/* ============================================================
   NAVEGADOR SIMULADO
   La pieza que enseña la web del cliente dentro de la nuestra.
============================================================ */
.nav-mock{
  display:block; position:relative; min-width:0; max-width:100%;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); overflow:hidden;
}
.nav-mock__bar{
  display:flex; align-items:center; gap:7px;
  padding:10px 14px; border-bottom:1px solid var(--line-soft);
  background:var(--panel-2);
}
.nav-mock__bar > i{
  width:7px; height:7px; border-radius:50%;
  background:var(--muted-2); flex:none;
}
.nav-mock__bar > i:first-child{ background:var(--accent); }
.nav-mock__url{
  margin-left:10px; min-width:0; padding:4px 12px; border-radius:var(--r);
  background:rgba(237,237,234,.05); border:1px solid var(--line-soft);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-mock__hint{
  margin-left:auto; font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2);
  white-space:nowrap;
}
.nav-mock__view{
  display:block; position:relative; overflow:hidden;
  height:var(--vista,260px); background:var(--bg);
}
.nav-mock__shot{
  display:block; width:100%; height:auto;
  will-change:transform;
  /* Sin esto el navegador lanza su drag&drop nativo sobre la imagen,
     dispara pointercancel y se lleva por delante nuestro arrastre. */
  -webkit-user-drag:none;
  user-select:none; -webkit-user-select:none;
  pointer-events:none;
}
/* Al pasar el cursor, la web se recorre sola hasta el final. */
.nav-mock__shot{ transition:transform .9s var(--ease); }
.caso__abrir:hover .nav-mock__shot,
.caso__abrir:focus-visible .nav-mock__shot,
.pcard__abrir:hover .nav-mock__shot,
.pcard__abrir:focus-visible .nav-mock__shot{
  transform:translateY(calc(-100% + var(--vista,260px)));
  transition:transform 9s linear;
}
.nav-mock__riel{
  position:absolute; right:0; bottom:0; left:0; height:2px;
  background:var(--line-soft);
}
.nav-mock__riel i{
  display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}

/* ============================================================
   CASOS DE ÉXITO — tira arrastrable
============================================================ */
.casos{ padding:clamp(80px,11vh,150px) 0; overflow:hidden; }
.casos .sec-head{ padding:0 var(--pad); }
.casos__tira{
  margin-top:clamp(30px,3.4vw,52px);
  cursor:grab; user-select:none; -webkit-user-select:none;
  /* Sin esto el navegador tactil interpreta el gesto como scroll suyo
     y cancela el nuestro a mitad. */
  touch-action:pan-y;
}
.casos__tira.is-drag{ cursor:grabbing; }
.casos__track{
  display:flex; width:max-content; padding:0 var(--pad);
  will-change:transform;
}
.caso{ flex:none; width:min(390px,74vw); margin-right:clamp(20px,2.2vw,34px); }
.caso__abrir{
  display:block; width:100%; text-align:left; padding:0;
  background:none; border:none; color:inherit;
}
.caso .nav-mock{ --vista:250px; }
.caso__abrir:hover .nav-mock,
.caso__abrir:focus-visible .nav-mock{ border-color:rgba(237,237,234,.30); }

.caso__pie{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:12px; padding-top:16px; margin-top:14px;
  border-top:1px solid var(--line-soft);
}
.caso__n{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted-2);
}
.caso__nombre{
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.03em;
}
.caso__sector{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); text-align:right;
}
.caso__abrir:hover .caso__pie,
.caso__abrir:focus-visible .caso__pie{ border-top-color:var(--accent); }

.casos__hint{
  margin-top:clamp(28px,3vw,44px); text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2);
}
.casos__hint span{ color:var(--accent); }

/* ============================================================
   VISOR — la web del cliente a pantalla completa
============================================================ */
.visor{
  position:fixed; inset:0; z-index:9700;
  visibility:hidden; opacity:0;
  transition:opacity .4s var(--ease), visibility .4s;
}
.visor.is-open{ visibility:visible; opacity:1; }
.visor__fondo{ position:absolute; inset:0; background:var(--bg); }
.visor__caja{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  padding:clamp(14px,2vw,28px);
  transform:translateY(18px);
  transition:transform .5s var(--ease);
}
.visor.is-open .visor__caja{ transform:none; }

.visor__top{
  flex:none; display:flex; align-items:center; gap:clamp(16px,2vw,30px);
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.visor__marca{
  font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.05em;
}
.visor__marca i{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-left:2px; vertical-align:baseline;
}
.visor__cuenta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--muted-2);
}
.visor__cuenta b{ font-weight:500; color:var(--white); }
.visor__mandos{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.visor__nav{
  width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r);
  font-size:15px; color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.visor__nav:hover{ color:var(--white); border-color:rgba(237,237,234,.32); }
.visor__cerrar{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.visor__cerrar:hover{ color:var(--accent); border-color:var(--accent); }
.visor__cerrar i{ font-style:normal; font-size:14px; }

.visor__cuerpo{
  flex:1; min-height:0; display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px); padding-top:clamp(16px,2vw,26px);
}

.visor__ficha{ overflow-y:auto; padding-right:8px; }
.visor__sector{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.visor__nombre{
  font-family:var(--display); font-weight:800;
  font-size:clamp(28px,3vw,46px); line-height:.96; letter-spacing:-.05em;
}
.visor__titular{
  margin-top:14px; font-family:var(--serif); font-size:clamp(17px,1.4vw,22px);
  line-height:1.3; color:var(--white);
}
.visor__datos{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:26px; border-top:1px solid var(--line-soft);
}
.visor__datos > div{ padding:14px 14px 0 0; border-right:1px solid var(--line-soft); }
.visor__datos > div:last-child{ border-right:none; padding-left:14px; }
.visor__datos dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:6px;
}
.visor__datos dd{ font-size:13.5px; }
.visor__datos dd a{ color:var(--white); border-bottom:1px solid var(--line); }
.visor__datos dd a:hover{ border-bottom-color:var(--accent); }

.visor__servicios{
  display:flex; flex-wrap:wrap; gap:0 12px; margin-top:22px;
}
.visor__servicios li{
  position:relative; padding:4px 0;
  font-family:var(--mono); font-size:11px; color:var(--muted-2);
}
.visor__servicios li::after{ content:'/'; position:absolute; right:-8px; color:var(--line); }
.visor__servicios li:last-child::after{ display:none; }

.visor__bloques{ margin-top:28px; }
.visor__bloques > div{ padding:18px 0; border-top:1px solid var(--line-soft); }
.visor__bloques h3{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:10px;
}
.visor__bloques p{ font-size:13.5px; line-height:1.6; color:var(--muted); }

.visor__acciones{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
}
.visor__acciones .btn{ flex:1 1 auto; }

.visor__pantalla{ min-height:0; display:flex; }
.visor__pantalla .nav-mock{ flex:1; display:flex; flex-direction:column; min-height:0; }
.visor__pantalla .nav-mock__view{
  flex:1; height:auto; min-height:0; cursor:grab;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
.visor__pantalla .nav-mock__view.is-drag{ cursor:grabbing; }
.visor__pantalla .nav-mock__shot{
  transition:none; max-width:none; margin:0 auto;
}

/* ============================================================
   REJILLA DE PROYECTOS
============================================================ */
.pgrid{ padding:0 var(--pad) clamp(70px,10vh,130px); }
.pgrid__in{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(34px,3.6vw,58px) clamp(20px,2.2vw,34px);
}
.pcard__abrir{
  display:block; width:100%; padding:0; text-align:left;
  background:none; border:none; color:inherit;
}
.pcard .nav-mock{ --vista:290px; }
.pcard__abrir:hover .nav-mock{ border-color:rgba(237,237,234,.30); }
.pcard__pie{
  display:grid; grid-template-columns:auto 1fr; gap:0 16px;
  padding-top:18px; margin-top:16px; border-top:1px solid var(--line-soft);
}
.pcard__n{
  grid-row:span 3; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; color:var(--muted-2); padding-top:4px;
}
.pcard__nombre{
  font-family:var(--display); font-weight:800;
  font-size:clamp(20px,1.8vw,28px); letter-spacing:-.04em; line-height:1;
}
.pcard__nombre a{ transition:color .3s var(--ease); }
.pcard__nombre a:hover{ color:var(--accent); }
.pcard__sector{
  margin-top:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.pcard__serv{ display:flex; flex-wrap:wrap; gap:0 12px; margin-top:12px; }
.pcard__serv li{
  position:relative; font-family:var(--mono); font-size:11px; color:var(--muted);
}
.pcard__serv li::after{ content:'·'; position:absolute; right:-8px; color:var(--line); }
.pcard__serv li:last-child::after{ display:none; }

/* ============================================================
   RECORRIDO — el navegador se fija y la web avanza con el scroll
============================================================ */
.recorrido{ position:relative; min-height:100svh; }
.recorrido__pin{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 20px) var(--pad) clamp(28px,4vh,48px);
}
.recorrido .nav-mock{
  width:min(980px,100%); height:100%;
  display:flex; flex-direction:column;
}
.recorrido .nav-mock__view{ flex:1; height:auto; min-height:0; }
.recorrido .nav-mock__shot{ transition:none; }

/* ============================================================
   TEXTO DEL CASO + SIGUIENTE
============================================================ */
.caso-texto{ padding:clamp(80px,11vh,150px) var(--pad); }
.caso-texto__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.caso-texto__grid article{
  padding:clamp(26px,3vw,44px) clamp(20px,2.2vw,36px) 0 0;
  border-right:1px solid var(--line-soft);
}
.caso-texto__grid article:not(:first-child){ padding-left:clamp(20px,2.2vw,36px); }
.caso-texto__grid article:last-child{ border-right:none; }
.caso-texto__grid h2{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.caso-texto__grid p{ font-size:15px; line-height:1.65; color:var(--muted); }
.caso-texto__cta{
  max-width:var(--maxw); margin:clamp(44px,5vw,76px) auto 0;
  display:flex; flex-wrap:wrap; gap:12px;
}

.siguiente{ padding:0 var(--pad) clamp(80px,11vh,150px); }
.siguiente__link{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
  padding:clamp(30px,3.6vw,56px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.siguiente__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2);
}
.siguiente__nombre{
  font-family:var(--display); font-weight:800;
  font-size:clamp(28px,4.6vw,68px); letter-spacing:-.05em; line-height:1;
  transition:transform .5s var(--ease);
}
.siguiente__link i{ font-style:normal; font-size:22px; color:var(--accent); }
.siguiente__link:hover .siguiente__nombre{ transform:translateX(20px); }

/* ============================================================
   VALORES (historia)
============================================================ */
.valores{ padding:clamp(80px,11vh,150px) var(--pad); }
.valores .sec-head{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.valores__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
}
.valor{
  padding:clamp(28px,3.2vw,52px) clamp(24px,2.6vw,44px) clamp(28px,3.2vw,52px) 0;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.valor:nth-child(2n){ border-right:none; padding-left:clamp(24px,2.6vw,44px); }
.valor h3{
  font-family:var(--display); font-weight:800;
  font-size:clamp(22px,2.2vw,34px); letter-spacing:-.04em;
}
.valor__sub{
  margin-top:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.valor p:last-child{ margin-top:16px; font-size:14.5px; line-height:1.65; color:var(--muted); }

/* ============================================================
   FICHA DE SERVICIO
============================================================ */
.tags-band{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:18px var(--pad);
}
.tags-band__in{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:0 22px;
}
.tags-band span{
  position:relative; padding:4px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted-2);
}
.tags-band span::after{ content:'/'; position:absolute; right:-13px; color:var(--line); }
.tags-band span:last-child::after{ display:none; }

.problemas,.incluye,.planes,.otros{ padding:clamp(76px,10vh,140px) var(--pad); }
.problemas .sec-head,.incluye .sec-head,.planes .sec-head,.otros .sec-head{
  max-width:var(--maxw); margin-left:auto; margin-right:auto;
}
.problemas__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.bloq{
  padding:clamp(26px,3vw,44px) clamp(20px,2.2vw,36px) 0 0;
  border-right:1px solid var(--line-soft);
}
.bloq:not(:first-child){ padding-left:clamp(20px,2.2vw,36px); }
.bloq:last-child{ border-right:none; }
.bloq__n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--accent);
}
.bloq h3{
  margin-top:16px; font-family:var(--display); font-weight:700;
  font-size:clamp(18px,1.7vw,25px); letter-spacing:-.035em; line-height:1.1;
}
.bloq p{ margin-top:12px; font-size:14px; line-height:1.6; color:var(--muted); }

.incluye__lista{ max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); }
.inc{
  display:grid; grid-template-columns:clamp(56px,7vw,120px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,44px);
  padding:clamp(24px,2.8vw,42px) 0;
  border-bottom:1px solid var(--line-soft);
}
.inc__n{
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px,3vw,46px); line-height:.9; letter-spacing:-.055em;
  color:var(--muted-2); transition:color .4s var(--ease);
}
.inc:hover .inc__n{ color:var(--accent); }
.inc h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px,1.8vw,27px); letter-spacing:-.035em;
}
.inc p{ margin-top:10px; max-width:72ch; font-size:14.5px; line-height:1.65; color:var(--muted); }

.planes__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.plan{
  padding:clamp(26px,3vw,46px) clamp(20px,2.2vw,36px) clamp(26px,3vw,46px) 0;
  border-right:1px solid var(--line-soft);
}
.plan:not(:first-child){ padding-left:clamp(20px,2.2vw,36px); }
.plan:last-child{ border-right:none; }
.plan__n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted-2); }
.plan h3{
  margin-top:14px; font-family:var(--display); font-weight:800;
  font-size:clamp(24px,2.4vw,38px); letter-spacing:-.045em;
}
.plan--destacado h3{ color:var(--accent); }
.plan__sub{
  margin-top:6px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2);
}
.plan__d{ margin-top:16px; font-size:14px; line-height:1.6; color:var(--muted); }
.plan ul{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); }
.plan li{
  padding:8px 0; font-family:var(--mono); font-size:12.5px; color:var(--muted);
  border-bottom:1px solid var(--line-soft);
}
.plan li:last-child{ border-bottom:none; }

.otros__lista{ max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); }
.otro{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px;
  padding:clamp(20px,2.4vw,34px) 0; border-bottom:1px solid var(--line-soft);
}
.otro__n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--muted-2); }
.otro__t{
  font-family:var(--display); font-weight:800;
  font-size:clamp(20px,2.6vw,38px); letter-spacing:-.045em; color:var(--muted-2);
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.otro i{ font-style:normal; color:var(--accent); opacity:0; transition:opacity .35s var(--ease); }
.otro:hover .otro__t{ color:var(--white); transform:translateX(16px); }
.otro:hover i{ opacity:1; }

/* ============================================================
   PARTNERS: placas, insignia y ficha completa
============================================================ */
.partner__placa{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:200px; height:74px; padding:0 28px; margin-bottom:26px;
  background:var(--white); border-radius:var(--r);
  transition:transform .45s var(--ease);
}
a.partner__placa:hover{ transform:translateY(-4px); }
/* Dentro de la tarjeta, el sello y el enlace no comparten linea. */
.partner .hbadge,
.partner .partner__nivel,
.partner .partner__link{ display:flex; width:fit-content; }
.partner .partner__link{ align-items:center; }
.partner__nombre a{ transition:color .3s var(--ease); }
.partner__nombre a:hover{ color:var(--accent); }
.partner__placa--grande{ min-width:250px; height:96px; }
.partner__placa img{ width:auto; max-width:100%; }
/* Holded entrega el logotipo en blanco; en assets/partners/holded-logo-tinta.svg
   está la variante con el texto en tinta para fondo claro. El rojo del
   isotipo no se toca. */

.partner__nombre{
  font-family:var(--display); font-weight:800;
  font-size:clamp(24px,2.6vw,40px); letter-spacing:-.045em;
}
.partner__d{ margin-top:12px; max-width:38ch; font-size:14.5px; line-height:1.6; color:var(--muted); }
.partner__nivel{
  display:inline-block; margin-top:20px; padding:8px 14px;
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.partner__link{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  transition:color .35s var(--ease);
}
.partner__link i{ font-style:normal; transition:transform .4s var(--ease); }
.partner__link:hover{ color:var(--accent); }
.partner__link:hover i{ transform:translate(4px,-4px); }

/* --- Insignia oficial de Holded. Es un sello de terceros:
       conserva su propia forma, incluidas las esquinas. --- */
.hbadge{
  display:inline-flex; align-items:center; gap:14px; margin-top:20px;
  padding:12px 22px 12px 14px; border-radius:12px;
  background:#131A2A; border:1px solid rgba(255,255,255,.08);
}
.hbadge__mark{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:50%; background:#D9B441;
}
.hbadge__mark svg{ width:24px; height:24px; fill:#131A2A; }
.hbadge__txt{ display:flex; flex-direction:column; line-height:1.15; }
.hbadge__txt b{
  font-family:var(--sans); font-weight:700; font-size:15px;
  letter-spacing:-.01em; color:#FFFFFF;
}
.hbadge__txt i{
  font-style:normal; font-family:var(--sans); font-weight:500;
  font-size:15px; color:#98A2B3;
}

.pficha__sello{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,40px);
}
.pficha__sello .partner__placa{ margin-bottom:0; }
.pficha__sello .hbadge{ margin-top:0; }

.pfull{ padding:clamp(70px,9vh,120px) var(--pad); border-top:1px solid var(--line-soft); }
.pfull__acciones{
  max-width:var(--maxw); margin:clamp(34px,4vw,56px) auto 0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.pfull__cols{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
}
.pfull__cols > div{
  padding:clamp(24px,2.6vw,40px) clamp(20px,2.4vw,40px) 0 0;
  border-right:1px solid var(--line-soft);
}
.pfull__cols > div:last-child{ border-right:none; padding-left:clamp(20px,2.4vw,40px); }
.pfull__cols h3{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:16px;
}
.pfull__cols p{ font-size:15px; line-height:1.65; color:var(--muted); }
.pfull__modulos{
  max-width:var(--maxw); margin:clamp(36px,4vw,64px) auto clamp(32px,3.6vw,52px);
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.modulo{
  padding:clamp(22px,2.4vw,36px) clamp(16px,1.8vw,28px) 0 0;
  border-right:1px solid var(--line-soft);
}
.modulo:not(:first-child){ padding-left:clamp(16px,1.8vw,28px); }
.modulo:last-child{ border-right:none; }
.modulo__n{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--accent); }
.modulo h4{
  margin-top:14px; font-family:var(--display); font-weight:700;
  font-size:17px; letter-spacing:-.03em;
}
.modulo p{ margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--muted); }

/* ============================================================
   LEGAL
============================================================ */
.legal{ padding:0 var(--pad) clamp(80px,11vh,140px); }
.legal__texto{
  max-width:78ch; margin:0 auto 0 0; padding-top:clamp(20px,2.4vw,34px);
  border-top:1px solid var(--line);
}
.legal__texto h2{
  margin:clamp(34px,3.6vw,54px) 0 16px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,1.8vw,26px); letter-spacing:-.035em;
}
.legal__texto h2:first-child{ margin-top:0; }
.legal__texto p{ margin-bottom:14px; font-size:15px; line-height:1.7; color:var(--muted); }
.legal__texto ul{ margin:0 0 18px; }
.legal__texto li{
  padding:9px 0; border-bottom:1px solid var(--line-soft);
  font-size:14.5px; line-height:1.6; color:var(--muted);
}
.legal__texto strong{ color:var(--white); font-weight:600; }
.legal__texto a{ color:var(--white); border-bottom:1px solid var(--line); }
.legal__texto a:hover{ border-bottom-color:var(--accent); }
.legal__fecha{
  margin-top:clamp(34px,3.6vw,54px); padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2) !important;
}
.legal__otros{
  max-width:var(--maxw); margin:clamp(50px,6vw,90px) 0 0;
  display:flex; flex-wrap:wrap; gap:0 26px;
  padding-top:20px; border-top:1px solid var(--line);
}
.legal__otros a{
  position:relative; padding:6px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
  transition:color .3s var(--ease);
}
.legal__otros a:hover{ color:var(--accent); }

/* ============================================================
   AJUSTES DE SECCIONES REUTILIZADAS
============================================================ */
.services--solo{ padding-top:0; }
.services--solo .cards{ padding-top:60px; border-top:none; }
.contact--solo{ padding-top:0; }
.nav__link.is-current span{ color:var(--white); }
.nav__link.is-current::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--accent);
}
.marquee-band--thin{ margin-top:clamp(46px,5vw,80px); }

/* ============================================================
   PIE: fila de contacto
============================================================ */
.footer__nav{ flex-wrap:wrap; row-gap:34px; }
.footer__nav > div{ min-width:150px; }
.footer__contacto{
  max-width:var(--maxw); margin:clamp(38px,4.4vw,64px) auto 0;
  padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(18px,3vw,52px);
}
.footer__mail{
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,2.2vw,32px); letter-spacing:-.04em;
  transition:color .3s var(--ease);
}
.footer__mail:hover{ color:var(--accent); }
.footer__tel{
  font-family:var(--mono); font-size:clamp(13px,1.2vw,16px);
  letter-spacing:.06em; color:var(--muted);
  transition:color .3s var(--ease);
}
.footer__tel:hover{ color:var(--white); }
.footer__social{ margin-left:auto; display:flex; gap:clamp(14px,2vw,28px); }
.footer__social a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-2);
  transition:color .3s var(--ease);
}
.footer__social a:hover{ color:var(--accent); }

/* ---------- Aviso de vista desde disco ---------- */
.mac-aviso{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  z-index:8; max-width:min(560px,86vw); text-align:center;
  padding:11px 18px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted);
}
.mac-aviso b{ font-weight:600; color:var(--white); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1180px){
  .pgrid__in{ grid-template-columns:repeat(2,1fr); }
  .pfull__modulos{ grid-template-columns:repeat(2,1fr); }
  .modulo:nth-child(2n){ border-right:none; }
  .modulo:nth-child(n+3){ margin-top:26px; }
  .visor__cuerpo{ grid-template-columns:minmax(0,300px) minmax(0,1fr); }
}

@media (max-width:980px){
  .phero__datos{ grid-template-columns:repeat(2,1fr); }
  .phero__datos > div:nth-child(2n){ border-right:none; }
  .phero__datos > div:nth-child(n+3){ margin-top:22px; }
  .caso-texto__grid{ grid-template-columns:1fr; }
  .caso-texto__grid article{
    border-right:none; border-bottom:1px solid var(--line-soft);
    padding:26px 0 26px !important;
  }
  .caso-texto__grid article:last-child{ border-bottom:none; }
  .problemas__grid,.planes__grid{ grid-template-columns:1fr; }
  .bloq,.plan{
    border-right:none; border-bottom:1px solid var(--line-soft);
    padding:26px 0 26px !important;
  }
  .valores__grid{ grid-template-columns:1fr; }
  .valor{ border-right:none; padding-left:0 !important; padding-right:0; }
  .pfull__cols{ grid-template-columns:1fr; }
  .pfull__cols > div{
    border-right:none; padding:24px 0 0 0 !important;
    border-bottom:1px solid var(--line-soft); padding-bottom:24px !important;
  }
  /* El visor pasa a una sola columna: primero la web, luego la ficha. */
  .visor__cuerpo{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; overflow-y:auto; }
  .visor__pantalla{ order:1; min-height:52svh; min-width:0; }
  .visor__pantalla .nav-mock{ min-width:0; max-width:100%; }
  .visor__ficha{ order:2; overflow:visible; padding-right:0; padding-top:22px; }
}

@media (max-width:720px){
  .phero{ padding-top:calc(var(--header-h) + 44px); }
  .phero__title{ font-size:clamp(32px,9vw,54px); }
  .phero__datos{ grid-template-columns:1fr; }
  .phero__datos > div{
    border-right:none; padding-left:0 !important;
    border-bottom:1px solid var(--line-soft); padding-bottom:16px; margin-top:0 !important;
  }
  .phero__datos > div:last-child{ border-bottom:none; }
  .pgrid__in{ grid-template-columns:1fr; }
  .pfull__modulos{ grid-template-columns:1fr; }
  .modulo{ border-right:none; padding-left:0 !important; margin-top:22px; }
  .inc{ grid-template-columns:1fr; gap:8px; }
  .otro{ grid-template-columns:auto 1fr; }
  .otro i{ display:none; }
  .siguiente__link{ grid-template-columns:1fr; gap:10px; }
  .caso{ width:min(300px,80vw); }
  .caso .nav-mock{ --vista:200px; }
  .pcard .nav-mock{ --vista:230px; }
  .visor__caja{ padding:10px; }
  .visor__mandos .visor__nav{ display:none; }
  .nav-mock__hint{ display:none; }
  .visor__acciones .btn{ flex:1 1 100%; }
  .visor__ficha,.visor__bloques p,.visor__titular{ overflow-wrap:anywhere; }
  .recorrido .nav-mock{ width:100%; }
  .legal__texto{ max-width:none; }
  .footer__social{ margin-left:0; width:100%; }
  .hbadge{ padding:10px 16px 10px 10px; gap:11px; }
  .hbadge__txt b,.hbadge__txt i{ font-size:13.5px; }
}

/* ============================================================
   MOTION REDUCIDO
============================================================ */
@media (prefers-reduced-motion:reduce){
  .nav-mock__shot{ transition:none !important; transform:none !important; }
  .caso__abrir:hover .nav-mock__shot,
  .pcard__abrir:hover .nav-mock__shot{ transform:none !important; }
  .casos__track{ transform:none !important; }
  .casos__tira{ overflow-x:auto; }
  .recorrido{ min-height:0; }
  .recorrido__pin{ position:static; height:auto; padding:40px var(--pad); }
  .recorrido .nav-mock{ height:auto; }
  .recorrido .nav-mock__view{ height:auto; flex:none; }
  .visor__caja{ transform:none; }
}