/* ===== TIPS SECTION ===== */
#tips {
  padding: 7rem 3rem;
  position: relative;
  background: var(--sand) !important;
}

#tips::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,191,174,0.20), rgba(208,93,62,0.35), rgba(143,191,174,0.20), transparent);
}

#tips h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.6rem;
  line-height: 1.15;
}

#tips .section-subtitle { color: var(--text-mid); }

/* ── Grid ── */
.tips-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* ── Card — teal ink glass ── */
.tip-card {
  background: var(--white);
  border: 1px solid rgba(27,55,41,0.08);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(27,55,41,0.06);
  transition:
    transform    var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out);
}

/* Barra dorada superior — se despliega al hover */
.tip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.tip-card:hover {
  transform: translateY(-6px);
  border-color: rgba(208,93,62,0.28);
  box-shadow: var(--glow-gold), 0 16px 40px rgba(27,55,41,0.12);
}
.tip-card:hover::before { transform: scaleX(1); }

/* ── Icono ── */
.tip-icon {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  display: block;
  transition: transform var(--duration-base) var(--ease-bounce);
}
.tip-card:hover .tip-icon { transform: scale(1.10); }

/* ── Título ── */
.tip-card h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.7rem;
  transition: color var(--duration-fast) var(--ease-out);
}
.tip-card:hover h3 { color: var(--gold); }

/* ── Texto ── */
.tip-card p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: var(--text-mid);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #tips { padding: 4rem 1.5rem; }
  .tips-grid { grid-template-columns: 1fr; }
}