/* AIZURG — páginas de producto (Turbot; después Aldia y Storia, copiando turbot.html).
   Se apoya en aizurg.css: la misma piel «Escalera» (carbón, lila = acción, verde = hecho,
   marcos delineados con pestaña), la misma nav, el mismo cierre y el mismo pie.
   Lo que es de un solo producto (la maqueta de la entrada) va en su CSS: turbot.css. */

/* ── entrada: el nombre grande, qué resuelve y la maqueta al lado ── */
.miga{gap:10px}
.miga::before{margin-right:2px}
.miga a{display:inline-block;padding:14px 0;margin:-14px 0;color:inherit;text-decoration:none}
.miga span[aria-hidden]{color:var(--tenue)}
.miga span:last-child{color:var(--suave)}
@media (hover:hover){.miga a:hover{color:var(--lila-claro);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}}
.portada__nombre{font-size:clamp(76px,10.4vw,156px);line-height:.86}
.portada__linea{margin-top:clamp(20px,2.2vw,30px);max-width:26ch;font:500 clamp(22px,2.1vw,30px)/1.24 var(--fuente);letter-spacing:-.02em;color:var(--texto);text-wrap:pretty}
.portada .hero__cta{margin-top:32px}

/* ── titulares de sección ── */
.sec__titular{margin-top:16px;max-width:900px}
.capacidad .h3,.marcha__paso h3,.pregunta .h3{text-wrap:balance}

/* ── QUÉ HACE: un marco, seis renglones en el orden en que pasa un mensaje ── */
.capacidades{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(48px,5vw,68px);border:var(--borde) solid var(--linea);border-radius:6px}
.capacidades > .pestana{left:16px}
.capacidad{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px;align-content:start;padding:30px 28px 28px;border-top:var(--borde) solid var(--linea-suave)}
.capacidad:nth-child(-n+3){border-top:0}
.capacidad:nth-child(even){border-right:var(--borde) solid var(--linea-suave)}
.capacidad__verbo{grid-row:1/3;padding-top:7px;font:600 11px/1.3 var(--fuente);letter-spacing:.14em;text-transform:uppercase;color:var(--lila)}
.capacidad .h3{font-size:clamp(21px,1.8vw,24px)}
.capacidad h3 + p{margin-top:8px;max-width:46ch;font-size:15.5px;color:var(--suave)}

/* ── EN MARCHA: cuatro pasos colgados de una línea, en escalera, como «Cómo trabajamos» ── */
.marcha{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);align-items:start;margin-top:clamp(56px,6vw,80px);padding-top:48px}
.marcha__linea{position:absolute;z-index:0;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,var(--linea) 0 5px,transparent 5px 10px)}
.marcha__linea::after{content:"";position:absolute;inset:0;background:var(--verde);transform:scaleX(var(--avance,1));transform-origin:0 50%}
.marcha__paso{--i:0;position:relative;z-index:1;margin-top:calc(var(--i)*40px);padding:28px 22px 24px;border:var(--borde) solid var(--linea);border-radius:var(--radio);background:var(--carbon)}
.marcha__paso:nth-child(3){--i:1}.marcha__paso:nth-child(4){--i:2}.marcha__paso:nth-child(5){--i:3}
.marcha__paso::before{content:"";position:absolute;left:50%;bottom:100%;width:1.5px;height:calc(48px + var(--i)*40px);background:var(--linea)}
.marcha__n{position:absolute;top:-12px;left:12px;z-index:2;display:inline-flex;padding:3px 8px;border-radius:3px;background:var(--carbon);border:var(--borde) solid var(--linea);font:600 10.5px/1.3 var(--fuente);letter-spacing:.12em;text-transform:uppercase;color:var(--lila)}
.marcha__n::before{content:"Paso\00a0"}
.marcha__paso h3{font-size:clamp(21px,1.8vw,24px)}
.marcha__paso p{margin-top:10px;font-size:15px;color:var(--suave)}
.marcha__link{font-weight:600;color:var(--lila);overflow-wrap:anywhere}

/* ── PREGUNTAS: pregunta a la izquierda, respuesta a la derecha ── */
.preguntas{margin-top:clamp(44px,5vw,64px);border-bottom:var(--borde) solid var(--linea-suave)}
.pregunta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px 40px;padding:26px 0;border-top:var(--borde) solid var(--linea-suave)}
.pregunta .h3{font-size:clamp(20px,1.7vw,24px);line-height:1.15}
.pregunta p{max-width:52ch;font-size:16px;color:var(--suave)}

/* ── responsive ── */
@media (max-width:1199px){
  .marcha{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:12px;gap:28px 18px}
  .marcha__linea,.marcha__paso::before{display:none}
  .marcha__paso{margin-top:0}
}
@media (max-width:899px){
  .capacidades{grid-template-columns:minmax(0,1fr)}
  .capacidad:nth-child(even){border-right:0}
  .capacidad:nth-child(3){border-top:var(--borde) solid var(--linea-suave)}
  .pregunta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:559px){
  .capacidad{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:26px 18px 24px}
  .capacidad__verbo{grid-row:auto;padding:0 0 8px}
  .marcha{grid-template-columns:minmax(0,1fr)}
  .portada .hero__cta .btn{flex:1 1 100%}
}