/* Transporte Conectado -- estilos exclusivos da pagina institucional da marca.
   Reaproveita os tokens de cor e os componentes base definidos em styles.css. */

.wordmark { display: grid; gap: 2px; line-height: 1; }
.wordmark strong { color: var(--primary-deep); font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.wordmark strong em { color: var(--accent); font-style: normal; }
.wordmark span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.brand.brand-text { width: auto; }

.brand-hero { min-height: 620px; }
.brand-hero .hero-grid { grid-template-columns: 1.05fr .95fr; }
.brand-hero h1 { max-width: 620px; }

.status-tag { padding: 6px 11px; border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.status-live { color: #15704f; background: #dcf3e9; }

/* Cartao do TECO no hero -- unico produto no ar hoje. */
.product-spotlight { position: relative; display: grid; gap: 20px; width: min(420px, 100%); padding: 32px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.product-spotlight:hover { transform: translateY(-4px); box-shadow: 0 30px 80px rgba(15, 76, 92, .19); }
.spotlight-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spotlight-top img { width: 148px; }
.product-spotlight > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.spotlight-points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.spotlight-points li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; color: var(--ink); font-size: 13px; font-weight: 650; }
.spotlight-points li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: #e7f2f2; font-size: 14px; }
.product-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 14px; font-weight: 850; }
.product-spotlight:hover .product-link { color: var(--accent); }

.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar { display: grid; align-content: start; gap: 11px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.pillar strong { color: var(--primary-deep); font-size: 17px; }
.pillar p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.pillar-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 38px; }
.pillar-note { max-width: 470px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.base-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.base-item { display: grid; gap: 10px; padding: 28px; border: 1px solid #e0e9ea; border-radius: 22px; background: #fff; }
.base-item span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: #e7f2f2; font-size: 19px; }
.base-item strong { color: var(--primary-deep); font-size: 16px; }
.base-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.company { background: #f6f9f9; }
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.company-title { margin: 0; color: var(--primary-deep); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.03em; }
.company-text { margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.company-card { display: grid; gap: 14px; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.company-card dl { display: grid; gap: 12px; margin: 0; }
.company-card dt { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.company-card dd { margin: 3px 0 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.company-card a { color: var(--primary); }

.brand-footer .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
.brand-footer .wordmark strong { color: #fff; font-size: 21px; }
.brand-footer .wordmark strong em { color: var(--highlight); }
.brand-footer .wordmark span { color: #83a8ad; }

/* Justificado so a partir de tablet -- ver a explicacao em styles.css. */
@media (min-width: 861px) {
  .product-spotlight > p,
  .pillar p,
  .pillar-note,
  .base-item p,
  .company-text {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media (max-width: 980px) {
  .pillar-grid, .base-grid { grid-template-columns: 1fr 1fr; }
  .company-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  .brand-hero .hero-grid { grid-template-columns: 1fr; }
  .product-spotlight { width: 100%; }
}

@media (max-width: 660px) {
  .pillar-grid, .base-grid { grid-template-columns: 1fr; }
  .pillar-cta { gap: 20px; }
}