/* styles.css - responsive page with fade + slide-up effects */

:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --accent:#082a56;
  --muted:#586066;
  --shadow: 0 8px 24px rgba(5,20,41,0.08);
  --gap:18px;
  --radius:12px;
}

.container{max-width:1100px;margin:0 auto;padding:28px;}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin:22px 0}
h3{margin-top:0;font-size:20px;color:var(--accent);text-align:center}
ul{margin-top:0;font-size:20px;color:var(--accent);text-align:center}

/* Tree diagram simplified */
.tree{display:flex;flex-direction:column;align-items:center;gap:14px}
.node{background:#0b3a6b;color:#fff;padding:10px 18px;border-radius:8px;font-weight:700}
.node.dark{background:#0b2f56}
.branch{display:flex;gap:18px;width:100%;justify-content:space-between;margin-top:8px}
.column{flex:1;display:flex;flex-direction:column;gap:10px}
.leaf{background:#07305a;color:#fff;padding:12px;border-radius:6px;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.06);font-weight:600;text-align:center}

/* Infra section layout */
.grid{display:flex;gap:20px;align-items:center}
.logo-col{flex:0 0 220px}
.muestra{width:100%;height:auto;border-radius:8px;object-fit:cover}
.text-col{flex:1;padding-left:8px}
.text-col ul{padding-left:18px}

/* Business */
.business-item{display:flex;gap:18px;align-items:flex-start;padding:12px 0;border-top:1px dashed #eee}
.business-item:first-of-type{border-top:none}
.logo{min-width:84px;height:84px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);border:2px solid #eee}

/* Reveal animations initial state */
/*.reveal{opacity:0;transform:translateY(18px);transition:opacity 650ms ease, transform 650ms cubic-bezier(.2,.9,.3,1)}

/* When visible */
/*.reveal.visible{opacity:1;transform:translateY(0)}

/* Logo styling additions */
.logos-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
  margin:10px 0 20px;
}
.logo-img{
  height:70px;
  width:auto;
  object-fit:contain;
}
.logo-placeholder{
  height:70px;
  min-width:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e9edf3;
  border:2px dashed #a0a6ad;
  color:#3a3f45;
  font-weight:600;
  border-radius:10px;
  text-transform:uppercase;
}