/* =============================================================
   Dentlion · nosotros.css
   Franja de confianza + "Sobre nosotros" + Valores (página Inicio)
   ============================================================= */

/* ---- Franja de confianza (USP) ---- */
.usp-strip { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .usp-strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .usp-strip { grid-template-columns: repeat(4, 1fr); } }
.usp {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1.1rem 1.2rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform var(--t), box-shadow var(--t);
}
.usp:hover { transform: translateY(-3px); box-shadow: var(--sh-sm); }
.usp__icon {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--teal-50); color: var(--teal-600);
}
.usp h3 { font-size: 0.98rem; color: var(--navy-800); margin-bottom: 0.15rem; }
.usp p  { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.45; }

/* ---- Sobre nosotros ---- */
.about { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }

.about__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-lg); aspect-ratio: 4 / 3.3; background: var(--grad-soft);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__badge {
  position: absolute; background: #fff;
  padding: 0.7rem 0.95rem; border-radius: var(--r-sm); box-shadow: var(--sh-md);
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 600; font-size: 0.85rem; color: var(--navy-800);
}
.about__badge svg { width: 20px; height: 20px; color: var(--teal-600); flex: none; }
.about__badge--tl { top: 1rem; left: 1rem; }
.about__badge--br { bottom: 1rem; right: 1rem; }

.about__body h2 { margin-bottom: 0.75rem; }
.about__body > p { color: var(--ink-soft); }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 480px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature {
  padding: 1.25rem; background: var(--surface);
  border: 1px solid var(--teal-100); border-radius: var(--r-md);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feature:hover { transform: translateY(-4px); background: #fff; border-color: var(--teal-400); box-shadow: var(--sh-md); }
.feature__icon {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 0.7rem;
  display: grid; place-items: center; background: var(--teal-600); color: #fff;
}
.feature h3 { font-size: 1rem; color: var(--navy-800); margin-bottom: 0.25rem; }
.feature p  { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }

/* ---- Valores ---- */
.values {
  position: relative; overflow: hidden;
  background: var(--grad-hero); color: #fff; border-radius: var(--r-lg);
  padding: clamp(2rem, 1rem + 4vw, 3.5rem);
  display: grid; grid-template-columns: 1fr; gap: 1.75rem;
}
.values::before {
  content: ""; position: absolute; top: -40%; right: -10%; width: 55%; height: 180%;
  background: radial-gradient(circle, rgba(65, 204, 217, 0.18), transparent 60%);
}
@media (min-width: 600px)  { .values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value { position: relative; }
.value__icon {
  width: 52px; height: 52px; border-radius: 13px; margin-bottom: 0.9rem;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2);
}
.value h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.35rem; }
.value p  { color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; line-height: 1.5; }