/* ════════════════════════════════════════════
   BICSA COMPANY – style-extra.css
════════════════════════════════════════════ */

/* ── AOS fallback ── */
body:not(.aos-initialized) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Multi-video hero ── */
.hero-videos { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.hero-vid.active { opacity: 1; }

/* ── SVG icons ── */
.area-icon-svg    { display: block; margin-bottom: .5rem; line-height: 1; }
.area-icon-svg svg { display: block; }
.ventaja-icon-svg { display: block; margin-bottom: .85rem; }
.ventaja-icon-svg svg { display: block; }
.contact-icon-svg { display: flex; flex-shrink: 0; margin-top: .15rem; }
.contact-item { display: flex; align-items: flex-start; gap: .9rem; }
.contact-item .contact-icon-svg svg { margin-top: .05rem; }
.contact-item strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--blue-primary); }
.contact-item span   { font-size: .94rem; color: #4a5568; }


/* ════════════════════════════════════════════
   RESEÑAS DE CLIENTES
════════════════════════════════════════════ */
.section-resenas { background: var(--off-white); padding-block: 88px; }
.resenas-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.resena-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem 1.75rem; box-shadow: var(--card-shadow); position: relative; transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; gap: .85rem; }
.resena-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.resena-quote { position: absolute; top: 1.25rem; right: 1.5rem; line-height: 1; }
.resena-stars { display: flex; gap: .15rem; }
.resena-text { font-size: .93rem; line-height: 1.7; color: #4a5568; flex: 1; font-style: italic; }
.resena-client { display: flex; align-items: center; gap: .85rem; padding-top: 1rem; border-top: 1px solid var(--gray-light); }
.resena-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--gray-light); }
.resena-avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-primary), var(--cyan)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.resena-name    { font-weight: 700; font-size: .92rem; color: var(--blue-dark); }
.resena-project { font-size: .77rem; color: var(--cyan); font-weight: 600; margin-top: .15rem; }


/* ════════════════════════════════════════════
   DISTRIBUCIÓN
════════════════════════════════════════════ */
.section-distribucion { background: var(--blue-dark); }
.section-distribucion .section-tag  { background: rgba(1,193,217,.2); border: 1px solid rgba(1,193,217,.4); }
.section-distribucion .section-header h2 { color: var(--white); }
.section-distribucion .section-header p  { color: rgba(255,255,255,.65); }
.section-distribucion .subsection-title  { color: var(--cyan); border-color: var(--cyan); }

.dist-tab-header { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.75rem; }
.dist-tab-btn { padding: .5rem 1.3rem; border-radius: 8px; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12); cursor: pointer; transition: all .25s; }
.dist-tab-btn:hover { color: var(--white); background: rgba(255,255,255,.12); }
.dist-tab-btn.active { color: var(--blue-dark); font-weight: 700; background: var(--cyan); border-color: var(--cyan); }
.dist-tab-panel { display: none; }
.dist-tab-panel.active { display: block; animation: tabIn .3s ease; }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.planos-proj-header .dist-tab-btn { color: var(--gray); background: transparent; border-color: var(--gray-light); }
.planos-proj-header .dist-tab-btn:hover { color: var(--blue-primary); background: var(--gray-light); }
.planos-proj-header .dist-tab-btn.active { color: var(--white); background: linear-gradient(135deg, var(--blue-primary), var(--blue-mid)); border-color: var(--blue-primary); }
.planos-proj-panel { display: none; }
.planos-proj-panel.active { display: block; animation: tabIn .3s ease; }


/* ════════════════════════════════════════════
   RESPONSIVE extras
════════════════════════════════════════════ */
@media (max-width: 900px) {
  .resenas-grid { grid-template-columns: 1fr 1fr; }
  .vgal-layout  { grid-template-columns: 1fr; }
  .vgal-thumbs  { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 580px) {
  .resenas-grid { grid-template-columns: 1fr; }
  .dist-tab-btn { font-size: .78rem; padding: .4rem .85rem; }
  .vgal-thumbs  { grid-template-columns: repeat(2,1fr); }
}