/* =========================================================================
   JB AIRCRAFT REFINISH · hermana de la web de yates.
   Mismos tokens, misma tipografía, mismo gesto (la línea). Lo que cambia:
   aquí NO hay fotos, así que la corriente es editorial tipográfico y el peso
   lo lleva el texto. Cuando lleguen sus fotos, sustituyen a .nota-fotos.
   ========================================================================= */

/* La cabecera puede ser fija porque el hero ya no es una foto a sangre. */
.cabecera--fija{
  position:sticky; inset:0 0 auto; background:var(--tinta);
  border-bottom:1px solid var(--borde);
}

/* ---------- hero editorial ---------- */
.hero--tipo{
  min-height:auto; display:grid; align-items:end;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2.5rem,5vw,5rem);
  padding:clamp(4rem,11vw,9rem) var(--margen) clamp(3.5rem,8vw,7rem);
  background:
    radial-gradient(120% 90% at 12% 0%, #221E18 0%, transparent 62%),
    radial-gradient(90% 70% at 92% 100%, #1D1A15 0%, transparent 58%),
    var(--tinta);
}
.hero--tipo .hero__txt{padding:0}
.hero--tipo .hero__t{margin-top:clamp(1.2rem,2.4vw,2rem)}
/* el gesto: la línea cruza la pantalla entera, igual que en la web de yates,
   y de paso cose el titular con la ficha del dato */
/* Dentro de la rejilla del hero el truco de 100vw no resuelve (el 50% del
   margen se mide contra la columna, no contra la pantalla): se estira el item. */
.hero--tipo .hero__t{justify-items:stretch}
.hero--tipo .hero__t > span:not(.flot){justify-self:start}
.hero--tipo .flot{width:auto; margin-left:0; margin-right:0}
.hero--tipo .flot::after{right:0; white-space:nowrap}
@media (max-width: 62rem){
  .hero--tipo{grid-template-columns:1fr; align-items:start}
}

/* la ficha del dato: es la que une las dos marcas */
.dato{
  border-top:1px solid var(--cinta); padding-top:1.4rem; max-width:34ch;
  align-self:end;
}
.dato__t{
  font:500 .6875rem/1.4 var(--cuerpo-f); letter-spacing:.24em;
  text-transform:uppercase; color:var(--cinta); margin:0 0 .9rem;
}
.dato__c{font-size:var(--step--1); line-height:1.6; color:var(--tenue); margin:0}
.dato__c strong{color:var(--texto); font-weight:500}
.dato__f{
  margin:1.1rem 0 0; font-family:var(--display-f);
  font-size:var(--step-1); line-height:1.2; color:var(--texto);
}

/* ---------- servicios en cuatro columnas ---------- */
.lista-servicios--4{
  grid-template-columns:repeat(auto-fit, minmax(min(13.5rem,100%),1fr));
}

/* ---------- razones: numeradas y grandes ---------- */
.razones{
  list-style:none; margin:0; padding:0; counter-reset:r;
  display:grid; gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit, minmax(min(19rem,100%),1fr));
}
.razones li{
  border-top:1px solid var(--borde); padding-top:1.3rem; position:relative;
}
.razones li::before{
  counter-increment:r; content:counter(r,decimal-leading-zero);
  display:block; font:400 var(--step-2)/1 var(--display-f);
  color:var(--acento-txt); margin-bottom:.9rem;
}
.razones h3{
  font:400 var(--step-2)/1.08 var(--display-f); letter-spacing:-.02em; margin:0 0 .7rem;
}
.razones p{color:var(--tenue); font-size:var(--step--1); line-height:1.6; margin:0; max-width:36ch}

/* ---------- hueco reservado para sus fotos ---------- */
.nota-fotos{
  margin:clamp(3rem,6vw,5rem) 0 0; padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;
  border:1px dashed var(--borde); text-align:center;
  font:500 .6875rem/1.6 var(--cuerpo-f); letter-spacing:.24em;
  text-transform:uppercase; color:var(--tenue);
}