/* daezpro.com — 03-hero-trust-problem.css
   Home: hero + gauge del hero, barra de confianza, seccion 'el problema'. */

/* -------------------------------------------------------------- 5.2 HERO */
.hero{
  padding-top:clamp(48px, 6vw, 84px);
  padding-bottom:var(--sec-space);
  overflow-x:clip; /* contiene la tarjeta que solapa */
}
.hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(40px, 5vw, 80px);
  align-items:center;
}
.hero__title{ margin-bottom:26px; }
.hero__sub{ max-width:34em; margin-bottom:36px; }
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* Composición de la derecha: foto + tarjeta gauge flotante */
.hero__media{ position:relative; }
.hero__photo{ position:relative; z-index:1; }

.gauge{
  position:absolute;
  left:-22px;
  bottom:30px;
  z-index:2;
  width:min(320px, 82%);
  padding:20px 20px 18px;
  transform:rotate(-1.5deg);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
}
.gauge__head{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  color:var(--text-body);
  margin-bottom:6px;
}
.gauge__svg{ width:100%; height:auto; }

/* Arco del instrumento */
.gauge__track{ fill:none; stroke:var(--border); stroke-width:14; stroke-linecap:round; }
.gauge__arc{ fill:none; stroke:url(#gaugeGrad); stroke-width:10; stroke-linecap:round; }
.gs0{ stop-color:var(--border); }
.gs1{ stop-color:var(--accent); }
.gauge__ticks line{ stroke:var(--border); stroke-width:2; stroke-linecap:round; }
.gauge__needle line{ stroke:var(--text-strong); stroke-width:3; stroke-linecap:round; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.gauge__needle{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.gauge__needle circle{ fill:var(--text-strong); }
.gauge__q{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-display);
  letter-spacing:-0.03em;
  fill:var(--text-strong);
}
.gauge__unit{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  letter-spacing:.06em;
  fill:var(--text-body);
}

.gauge__control{ margin-top:4px; }
.gauge__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:8px;
}
.gauge__row label{
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-body);
}
.gauge__row output{
  font-family:var(--font-mono);
  font-size:var(--fs-body);
  font-weight:500;
  color:var(--text-strong);
}
.gauge__slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:var(--r-xs);
  background:linear-gradient(90deg, var(--accent) 0%, var(--border) 0%);
  background:var(--border);
  outline-offset:4px;
}
.gauge__slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--surface);
  box-shadow:var(--sh-xs);
  cursor:pointer;
}
.gauge__slider::-moz-range-thumb{
  width:16px; height:16px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--surface);
  box-shadow:var(--sh-xs);
  cursor:pointer;
}
.gauge__slider::-moz-range-track{ height:4px; border-radius:var(--r-xs); background:var(--border); }

.gauge__link{
  display:inline-block;
  margin-top:14px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--accent-strong);
  transition:opacity .16s ease;
}
.gauge__link:hover{ text-decoration:underline; }

/* ------------------------------------------------ 5.3 BARRA DE CONFIANZA */
.trust__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.trust__item{
  text-align:center;
  padding:8px 12px;
}
.trust__item + .trust__item{ border-left:1px solid var(--border); }
.trust__num{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(38px, 4.4vw, 52px);
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--text-strong);
}
.trust__num .u{ color:var(--accent-strong); }
.trust__label{
  display:block;
  margin-top:12px;
  font-size:var(--fs-body);
  color:var(--text-body);
  line-height:1.4;
}

/* -------------------------------------------------------- 5.4 EL PROBLEMA */
.problem .h2{ max-width:16ch; margin-bottom:56px; }
.problem__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 44px);
}
.problem__item{ position:relative; padding-top:28px; }
.problem__item::before{ /* hairline superior tipo tabla técnica */
  content:"";
  position:absolute; top:0; left:0;
  width:44px; height:2px;
  background:var(--accent);
}
.problem__no{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  letter-spacing:.1em;
  color:var(--text-body);
  margin-bottom:10px;
}
.problem__txt{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(19px, 1.7vw, 23px);
  letter-spacing:-0.02em;
  line-height:1.25;
  color:var(--text-strong);
}