/* ===================================================================
   LLAMATUWEB.com — portafolio.css
   Estilos exclusivos de la página interna /portafolio.html
   (usa las variables y componentes base definidos en style.css)
   =================================================================== */

/* ---------- Hero de portafolio (banner Alpha) ---------- */
.portfolio-hero {
  position: relative; overflow: hidden;
  padding: 150px 0 64px; min-height: 460px;
  background: var(--color-black);
  display: flex; align-items: center;
}
.portfolio-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%;
}
.portfolio-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.52) 42%, rgba(0,0,0,.22) 66%, rgba(0,0,0,.42) 100%);
}
.portfolio-hero-inner { position: relative; z-index: 2; width: 100%; }
.portfolio-hero-text { max-width: 640px; }
.portfolio-hero-text .eyebrow { color: var(--color-red); }
.portfolio-hero-text h1 {
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45);
  font-size: clamp(2.1rem, 3.8vw, 3.1rem); margin: 8px 0 12px;
}
.portfolio-hero-text p { color: #eee; font-size: 1.05rem; margin: 0 0 26px; max-width: 520px; }
.portfolio-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Grilla completa (portafolio) ---------- */
.portfolio-full-section { background: var(--color-black); color: #fff; padding: 80px 0 90px; }
.portfolio-full-header { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.portfolio-full-header .eyebrow { color: var(--color-red); }
.portfolio-full-header h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); color: #fff; margin: 8px 0 12px; }
.portfolio-full-header p { color: #ccc; margin: 0; }

.portfolio-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.portfolio-full-grid .portfolio-card { min-width: 0; max-width: none; }
.portfolio-full-grid .portfolio-card img { height: 180px; }

/* ---------- Franja CTA de cierre ---------- */
.portfolio-cta-banner { background: linear-gradient(90deg, var(--color-red-dark) 0%, var(--color-red) 100%); padding: 54px 0; }
.portfolio-cta-inner { text-align: center; max-width: 620px; margin: 0 auto; }
.portfolio-cta-inner h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0 0 10px; }
.portfolio-cta-inner p { color: #ffe0de; margin: 0 0 26px; }
.portfolio-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .portfolio-full-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .portfolio-hero { padding-top: 108px; min-height: 400px; }
}

@media (max-width: 640px) {
  .portfolio-hero { min-height: 340px; padding-bottom: 48px; }
  .portfolio-hero-inner { text-align: center; }
  .portfolio-hero-text { max-width: none; }
  .portfolio-hero-text p { margin-left: auto; margin-right: auto; }
  .portfolio-hero-cta { justify-content: center; }
  .portfolio-full-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}