/*
  Archivo preparado para cambios visuales rápidos.
  Puedes modificar colores, radios, sombras o tamaños sin tocar la estructura base.

  Ejemplos:
  :root { --color-primary: #123456; }
  .hero { background: #f4f4f4; }
*/

/* Hipolab ajuste final: logo premium, ITP visible, tipos centrados y móvil más legible */
.header-inner { min-height: 86px; }
.brand-logo { height: 62px; width: auto; }
.footer-logo { width: 230px; max-width: 100%; }

.types-panel { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; text-align: center; }
.center-block .eyebrow { margin-left: auto; margin-right: auto; }
.type-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.type-info-grid .info-box {
  text-align: center;
  background: #fff;
  border-color: rgba(15,118,110,.16);
}
.type-info-grid .info-box h3 { font-size: 1.18rem; }

.itp-section { padding-top: 64px; }
.itp-visible-panel {
  border: 1px solid rgba(15,118,110,.22);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, #ffffff, #f1fbf8);
  box-shadow: var(--shadow-soft);
  padding: 30px;
}
.itp-visible-panel .optional-grid { padding: 0; }
.itp-visible-panel .section-head { margin-bottom: 0; }
.itp-visible-panel .eyebrow {
  background: #fff;
  border: 1px solid rgba(15,118,110,.16);
}
.itp-card {
  border-color: rgba(15,118,110,.20);
  background: rgba(255,255,255,.92);
}

@media (max-width: 920px) {
  .type-info-grid { grid-template-columns: 1fr; }
  .type-info-grid .info-box { max-width: 560px; margin-inline: auto; }
  .itp-visible-panel { padding: 24px; }
}

@media (max-width: 760px) {
  body { font-size: 18px; }
  .header-inner { min-height: 78px; }
  .brand-logo { height: 56px; }
  .site-nav a { font-size: 1.04rem; }
  .calculator-card, .result-card, .itp-card { padding: 26px; }
  .field span { font-size: 1.02rem; }
  .input-wrap input, .select-wrap select { min-height: 60px; font-size: 1.12rem; }
  .button { font-size: 1.04rem; }
  .hero-text, .section-head p { font-size: 1.1rem; }
  .type-info-grid .info-box { padding: 24px; }
  .itp-visible-panel { padding: 22px; border-radius: 26px; }
}

@media (max-width: 420px) {
  .container { width: min(100% - 18px, var(--container)); }
  h1 { font-size: 2.42rem; }
  h2 { font-size: 1.86rem; }
  .brand-logo { height: 52px; }
  .calculator-card, .result-card, .itp-card { padding: 22px; }
  .itp-visible-panel { padding: 18px; }
}