/* ============================================================
   alek digital — Subpage styles (Proyectos · Servicios · Contacto)
   Extends the portfolio system. Nav, footer, buttons, cards and
   tokens are inherited; this file only adds page-specific pieces.
   ============================================================ */

@import url('portfolio.css');

/* ------------------------------------------------------------
   PAGE HEADER — compact dark hero used on every subpage
   ------------------------------------------------------------ */
.pagehead {
  position: relative; overflow: hidden;
  background: var(--ink-950);
  padding: calc(60px + 5.5rem) 2.5rem 4.5rem;
}
.pagehead::before {
  content: ''; position: absolute; top: -160px; right: -120px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,0,0.16) 0%, transparent 70%);
  pointer-events: none;
}
.pagehead::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--paper-grain); opacity: 0.04; mix-blend-mode: screen; pointer-events: none;
}
.pagehead .inner { position: relative; z-index: 1; }
.pagehead .kicker { color: var(--yellow-400); }
.pagehead__title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem); letter-spacing: var(--tracking-tight);
  line-height: 1; color: var(--ink-50); margin: 0.2rem 0 0;
}
.pagehead__title em { font-style: normal; color: var(--yellow-400); }
.pagehead__intro {
  font-size: 1.05rem; line-height: var(--leading-normal);
  color: rgba(245,242,236,0.62); max-width: 560px; margin-top: 1.5rem;
}
.pagehead__crumb {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(245,242,236,0.4); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.pagehead__crumb a { color: var(--yellow-400); }
.pagehead__crumb a:hover { color: #fff; }

/* keep fixed-nav clearance on plain content sections */
.pagewrap section:first-of-type { padding-top: var(--section-y); }

/* current page indicator in nav */
.nav__links > a.is-current { color: #fff; }
.nav__links > a.is-current::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   PROJECTS — stacked full-width case cards (alternating)
   ------------------------------------------------------------ */
.projects { display: flex; flex-direction: column; gap: 2.6rem; margin-top: 3rem; }
.pcard {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0;
  border: 2px solid var(--ink-950); background: var(--color-bg);
  box-shadow: var(--sticker-ink); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pcard:hover { transform: translate(2px,2px); box-shadow: var(--sticker-ink-sm); }
.pcard__media {
  position: relative; background: var(--ink-950); min-height: 460px;
  border-right: 2px solid var(--ink-950);
}
.pcard__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcard__num {
  position: absolute; top: 0.6rem; left: 1.1rem; z-index: 3; pointer-events: none;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 4.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--yellow-400);
}
.pcard__body {
  padding: 3rem 2.8rem; display: flex; flex-direction: column;
  justify-content: center; gap: 0.55rem;
}
.pcard__meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--terracotta-500); }
.pcard__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -0.02em; line-height: 1; color: var(--text-strong); }
.pcard__role { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.pcard__line { font-size: 0.96rem; line-height: var(--leading-normal); color: var(--text-body); margin: 0.5rem 0 0.3rem; max-width: 42ch; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.2rem; }
.pcard__tags .tool { font-family: var(--font-mono); font-size: 0.64rem; padding: 4px 10px; background: var(--ink-100); border-radius: var(--radius-pill); color: var(--ink-500); }
.pcard__stats { display: flex; gap: 2.4rem; margin: 0.6rem 0 1.4rem; flex-wrap: wrap; }
.pcard__stats .cstat { display: flex; flex-direction: column; }
.pcard__stats .cstat b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.7rem; line-height: 1; color: var(--ink-950); }
.pcard__stats .cstat span { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.25rem; }
.pcard__cta { align-self: flex-start; }

/* External links (official site / social) on cards & detail heroes */
.pcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.2rem; }
.extlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em;
  padding: 0.6rem 0.9rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text-body); background: var(--color-surface);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.extlink i { width: 15px; height: 15px; color: var(--terracotta-500); }
.extlink:hover { border-color: var(--ink-950); color: var(--ink-950); box-shadow: var(--sticker-ink-sm); transform: translate(-1px,-1px); }

/* Dark variant used inside the project-detail hero */
.cshero__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.9rem; }
.cshero__links .extlink { background: rgba(255,255,255,0.05); border-color: rgba(245,242,236,0.22); color: var(--ink-50); }
.cshero__links .extlink i { color: var(--yellow-400); }
.cshero__links .extlink:hover { background: var(--yellow-400); color: var(--ink-950); border-color: var(--yellow-400); box-shadow: none; transform: translate(-1px,-1px); }
.cshero__links .extlink:hover i { color: var(--ink-950); }

/* Alternate sides */
.pcard:nth-child(even) .pcard__media { order: 2; border-right: none; border-left: 2px solid var(--ink-950); }
.pcard:nth-child(even) .pcard__body { order: 1; }

/* ------------------------------------------------------------
   CTA BAND — closing call-to-action used on Proyectos & Servicios
   ------------------------------------------------------------ */
.ctaband {
  margin-top: 4rem; background: var(--yellow-400);
  border: 2px solid var(--ink-950); border-radius: var(--radius-lg);
  box-shadow: var(--sticker-ink); padding: 3.2rem 2.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
  position: relative; overflow: hidden;
}
.ctaband::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--paper-grain); opacity: 0.06; mix-blend-mode: multiply; pointer-events: none;
}
.ctaband__title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -0.02em;
  line-height: 1.05; color: var(--ink-950); position: relative;
}
.ctaband__sub { font-size: 0.98rem; color: var(--ink-800); max-width: 480px; line-height: var(--leading-normal); position: relative; }
.ctaband .hero__cta { justify-content: center; position: relative; }

/* ------------------------------------------------------------
   SERVICES PAGE — intro stats + bottom band
   ------------------------------------------------------------ */
.svcpage { background: var(--color-bg); }
.svcpage--alt { background: var(--color-surface); }

/* ------------------------------------------------------------
   CONTACT PAGE — make the section breathe on its own page
   ------------------------------------------------------------ */
.contactpage { background: var(--color-bg); }
.contactpage .contact { margin-top: 0; }

/* ============================================================
   PROJECT DETAIL (case study)
   ============================================================ */
/* Hero meta row under the page title */
.csmeta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.4rem; }
.csmeta__item { display: flex; flex-direction: column; gap: 0.2rem; }
.csmeta__k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,242,236,0.45); }
.csmeta__v { font-size: 0.92rem; font-weight: 600; color: var(--ink-50); }
.csmeta__sep { width: 1px; align-self: stretch; background: rgba(245,242,236,0.14); }

/* Hero headline stats */
.cshero__stats { display: flex; flex-wrap: wrap; gap: 2.6rem; margin-top: 2.2rem; }
.cshero__stat .n { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 2.6rem; line-height: 1; color: var(--yellow-400); }
.cshero__stat .l { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,242,236,0.5); margin-top: 0.35rem; }

/* Full-bleed hero media */
.cshero__media { position: relative; height: clamp(320px, 46vw, 560px); background: var(--ink-950); border-bottom: 2px solid var(--yellow-400); }
.cshero__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Generic case-study section header */
.cs-head { max-width: 720px; }
.cs-head .kicker { color: var(--terracotta-500); }
.cs-head .title { margin-bottom: 0; }
.cs-lede { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; color: var(--text-body); max-width: 760px; margin-top: 1.6rem; }
.cs-lede strong { color: var(--text-strong); font-weight: 600; }

/* About company — text + facts */
.cs-about { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: 3.5rem; margin-top: 2.5rem; align-items: start; }
.cs-about__body p { color: var(--text-body); line-height: var(--leading-relaxed); margin-bottom: 1.1rem; }
.cs-about__body p strong { color: var(--text-strong); font-weight: 600; }
.cs-facts { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; box-shadow: var(--sticker-ink-sm); }
.cs-facts dl { display: flex; flex-direction: column; }
.cs-facts .row { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border-muted); }
.cs-facts .row:last-child { border-bottom: none; }
.cs-facts dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.cs-facts dd { font-size: 0.92rem; font-weight: 600; color: var(--text-strong); }

/* Challenge — emphasized block */
.cs-challenge { background: var(--ink-950); }
.cs-challenge .kicker { color: var(--yellow-400); }
.cs-challenge .title { color: var(--ink-50); }
.cs-challenge .title em { color: var(--yellow-400); }
.cs-challenge .cs-lede { color: rgba(245,242,236,0.72); }
.cs-challenge .cs-lede strong { color: #fff; }

/* Strategy pillars */
.cs-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.pillar { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; position: relative; overflow: hidden; }
.pillar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--yellow-400); }
.pillar__n { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--terracotta-500); }
.pillar h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.18rem; color: var(--text-strong); }
.pillar p { font-size: 0.88rem; color: var(--text-muted); line-height: var(--leading-normal); }

/* Services applied — tag chips */
.cs-applied { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.cs-applied .chip { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; padding: 0.55rem 1rem; border-radius: var(--radius-pill); background: var(--ink-950); color: var(--yellow-400); border: 1.5px solid var(--ink-950); }

/* Results — dark metrics + before/after */
.cs-results { background: var(--ink-950); }
.cs-results .kicker { color: var(--yellow-400); }
.cs-results .title { color: var(--ink-50); }
.cs-results .title em { color: var(--yellow-400); }
.cs-ba { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; margin-top: 2.6rem; }
.ba { background: rgba(255,253,249,0.05); border: 1px solid rgba(255,253,249,0.1); border-radius: var(--radius-lg); padding: 1.7rem 1.8rem; }
.ba__lbl { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245,242,236,0.5); margin-bottom: 0.9rem; }
.ba__row { display: flex; align-items: baseline; gap: 0.9rem; }
.ba__from { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.7rem; color: rgba(245,242,236,0.4); }
.ba__arrow { color: var(--yellow-400); font-size: 1.3rem; }
.ba__to { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 2.4rem; color: var(--yellow-400); line-height: 1; }

/* Gallery */
.cs-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 1rem; margin-top: 2.5rem; }
.cs-gallery image-slot { width: 100%; height: 100%; border: 2px solid var(--ink-950); box-shadow: var(--sticker-ink-sm); background: var(--ink-950); }
.cs-gallery .g-wide { grid-column: span 2; }
.cs-gallery .g-tall { grid-row: span 2; }

/* Big single testimonial */
.cs-quote { margin-top: 2.5rem; background: var(--yellow-400); border: 2px solid var(--ink-950); border-radius: var(--radius-lg); box-shadow: var(--sticker-ink); padding: 3rem 3.2rem; position: relative; overflow: hidden; }
.cs-quote::after { content: '\201D'; position: absolute; top: -1.5rem; right: 1.5rem; font-family: var(--font-display); font-size: 9rem; color: rgba(15,14,12,0.12); line-height: 1; }
.cs-quote p { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.3; color: var(--ink-950); position: relative; max-width: 30ch; }
.cs-quote__a { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem; }
.cs-quote__av { width: 44px; height: 44px; border-radius: 50%; background: var(--ink-950); color: var(--yellow-400); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.cs-quote__nm { font-weight: 700; color: var(--ink-950); }
.cs-quote__role { font-size: 0.78rem; color: var(--ink-800); }

/* Phases — vertical timeline */
.cs-phases { margin-top: 2.6rem; display: flex; flex-direction: column; }
.phase { display: grid; grid-template-columns: 90px 1fr; gap: 1.6rem; padding: 1.4rem 0; border-top: 1px solid var(--border); }
.phase:first-child { border-top: none; }
.phase__yr { font-family: var(--font-mono); font-size: 0.8rem; color: var(--terracotta-500); letter-spacing: 0.04em; padding-top: 0.2rem; }
.phase__nm { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.2rem; color: var(--text-strong); margin-bottom: 0.25rem; }
.phase__d { font-size: 0.92rem; color: var(--text-muted); line-height: var(--leading-normal); max-width: 60ch; }


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .pcard { grid-template-columns: 1fr; }
  .pcard__media { min-height: 300px; border-right: none; border-bottom: 2px solid var(--ink-950); }
  .pcard:nth-child(even) .pcard__media { order: 0; border-left: none; border-bottom: 2px solid var(--ink-950); }
  .pcard:nth-child(even) .pcard__body { order: 0; }
  .pcard__body { padding: 2.2rem 1.7rem; }
  .cs-about { grid-template-columns: 1fr; gap: 2rem; }
  .cs-pillars { grid-template-columns: 1fr 1fr; }
  .cs-ba { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .cs-gallery .g-tall { grid-row: span 1; }
}
@media (max-width: 560px) {
  .pagehead { padding: calc(60px + 3rem) 1.2rem 3rem; }
  .ctaband { padding: 2.4rem 1.4rem; }
  .cs-pillars { grid-template-columns: 1fr; }
  .cshero__stats { gap: 1.6rem; }
  .cs-quote { padding: 2rem 1.6rem; }
  .phase { grid-template-columns: 64px 1fr; gap: 1rem; }
}