/* ============================================================
   HENKO STUDIO CREATIVO — Colors & Typography
   ============================================================
   Direct, bold, warm. Coral is the action color. Black is the
   premium frame. Cream is warmth. White is breathing room.
   Type is treated as a design element — big, confident, with
   intentional rhythm between heavy condensed sans, bold italic
   serif, and clean grotesque body.
   ============================================================ */

/* — Google Fonts (load once at the document head) —
   Montserrat: brand body + UI grotesque (already used in
     henkostudio.com.mx production site).
   Anton: heavy condensed display for impact statements
     (matches the "CONTENIDO PROFESIONAL" treatment).
   DM Serif Display: bold italic serif for the warm,
     hospitality-style moments (matches "Buscamos Asistente
     Creativo"). Used SPARINGLY — display only, never body.
*/


:root {
  /* ────────────────────────────────────────────────────────
     COLOR — Primary palette
     ──────────────────────────────────────────────────────── */

  /* Coral — the action color. Buttons, CTAs, accents, links.
     NEVER a dominant background. NEVER decorative without
     purpose. */
  --henko-coral:        #E55151;
  --henko-coral-dark:   #C03B3B;  /* hover / press on coral */
  --henko-coral-soft:   #F1948F;  /* disabled / quiet accent */

  /* Deep black — the premium frame. Headers, impact sections,
     slide backgrounds. Default dark surface. */
  --henko-black:        #1A1A1A;
  --henko-black-90:     #2A2A2A;  /* elevated dark surface */
  --henko-black-70:     #4A4A4A;  /* dim text / borders on dark */

  /* White — text on dark, breathing room on light content. */
  --henko-white:        #FFFFFF;

  /* Cream — the warm alternative. Long-form light surfaces,
     warm backdrops that aren't sterile white. */
  --henko-cream:        #F4F5E9;
  --henko-cream-dark:   #E8E9D9;  /* cream borders / wells */

  /* Neutral grays — used sparingly; prefer cream + black. */
  --henko-ink:          #1A1A1A;
  --henko-ink-70:       #4D4D4D;
  --henko-ink-50:       #8A8A8A;  /* muted captions */
  --henko-ink-30:       #C8C8C8;  /* hairlines on light */
  --henko-ink-10:       #ECECEC;

  /* ────────────────────────────────────────────────────────
     COLOR — Semantic tokens
     Use these in components; remap them per surface (light /
     dark) by overriding inside .henko-dark.
     ──────────────────────────────────────────────────────── */
  --bg:          var(--henko-cream);   /* default page surface */
  --bg-alt:      var(--henko-white);   /* card / content well */
  --bg-invert:   var(--henko-black);   /* premium / hero */

  --fg:          var(--henko-black);   /* primary text */
  --fg-muted:    var(--henko-ink-50);  /* secondary text */
  --fg-invert:   var(--henko-white);   /* text on dark */

  --accent:      var(--henko-coral);   /* action + emphasis */
  --accent-fg:   var(--henko-white);   /* text on coral */
  --accent-hover:var(--henko-coral-dark);

  --rule:        var(--henko-cream-dark);  /* hairlines */
  --rule-strong: var(--henko-black);

  /* ────────────────────────────────────────────────────────
     TYPE — Font families
     ──────────────────────────────────────────────────────── */
  --font-sans:      'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-condensed: 'Anton', 'Montserrat', system-ui, sans-serif;       /* heavy display only */
  --font-serif:     'DM Serif Display', 'Georgia', serif;                /* italic display only */
  --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;           /* utility only */

  /* ────────────────────────────────────────────────────────
     TYPE — Scale (mobile→desktop via clamp)
     Slides + marketing use the display sizes. Body sits at 16.
     ──────────────────────────────────────────────────────── */
  --t-display-xl: clamp(3.5rem, 9vw, 7rem);     /* hero impact */
  --t-display-l:  clamp(2.75rem, 6.5vw, 5rem);  /* slide titles */
  --t-display-m:  clamp(2rem, 4.5vw, 3.25rem);  /* page titles */
  --t-h1:         clamp(2rem, 3.5vw, 2.75rem);
  --t-h2:         clamp(1.5rem, 2.5vw, 2rem);
  --t-h3:         1.25rem;
  --t-body-l:     1.125rem;   /* lead paragraphs */
  --t-body:       1rem;       /* default */
  --t-body-s:     0.875rem;
  --t-caption:    0.75rem;
  --t-eyebrow:    0.7rem;     /* uppercase tracked label */

  /* Line heights — tight on display, generous on body. */
  --lh-display:   1.02;
  --lh-heading:   1.1;
  --lh-body:      1.6;
  --lh-tight:     1.3;

  /* Letter spacing */
  --ls-display:   -0.03em;    /* tighten heavy sans */
  --ls-tight:     -0.02em;
  --ls-normal:    0;
  --ls-eyebrow:   0.14em;     /* uppercase eyebrows */

  /* ────────────────────────────────────────────────────────
     SPACING — 4pt scale
     ──────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ────────────────────────────────────────────────────────
     RADII — restrained. Henko is bold, not soft.
     ──────────────────────────────────────────────────────── */
  --radius-xs:  3px;
  --radius-sm:  6px;    /* default card radius */
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ────────────────────────────────────────────────────────
     SHADOWS — only on light surfaces; never on dark.
     Subtle, never the "agency drop-shadow" trope.
     ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);

  /* ────────────────────────────────────────────────────────
     MOTION — fast, decisive, never bouncy.
     ──────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ────────────────────────────────────────────────────────
   DARK / INVERTED SURFACE
   Apply to <section class="henko-dark"> or <body class="henko-dark">.
   Remaps semantic tokens; component code never has to branch.
   ──────────────────────────────────────────────────────── */
.henko-dark {
  --bg:        var(--henko-black);
  --bg-alt:    var(--henko-black-90);
  --fg:        var(--henko-white);
  --fg-muted:  rgba(255,255,255,0.62);
  --rule:      rgba(255,255,255,0.12);
  background: var(--bg);
  color: var(--fg);
}

/* ────────────────────────────────────────────────────────
   BASE — semantic element styles
   These are CSS-class semantics (.h1, .body, etc.) so that
   you can apply hierarchy without forcing an h1 in markup.
   ──────────────────────────────────────────────────────── */
body, .henko-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — heavy condensed sans. Big impact, no body copy. */
.henko-display-xl,
.henko-display-l {
  font-family: var(--font-condensed);
  font-weight: 400;             /* Anton ships only at 400 */
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-transform: none;
}
.henko-display-xl { font-size: var(--t-display-xl); }
.henko-display-l  { font-size: var(--t-display-l);  }

/* DISPLAY — Montserrat 900 alternative when the condensed
   feels too editorial and you want the brand's own grotesque. */
.henko-display-grotesque {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--t-display-l);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

/* DISPLAY — italic serif. Warm, editorial. Use SPARINGLY.
   Used for invitational headlines, hospitality moments. */
.henko-display-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-display-l);
  letter-spacing: -0.01em;
  line-height: var(--lh-display);
}

/* HEADINGS */
h1, .henko-h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--t-h1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}
h2, .henko-h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-h2);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}
h3, .henko-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
}

/* EYEBROW — uppercase tracked label. Coral by default. */
.henko-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* BODY variants */
p, .henko-p { font-size: var(--t-body); line-height: var(--lh-body); }
.henko-lead { font-size: var(--t-body-l); line-height: 1.55; }
.henko-small{ font-size: var(--t-body-s); }
.henko-caption {
  font-size: var(--t-caption);
  color: var(--fg-muted);
  line-height: 1.4;
}

/* LINKS — coral, no underline by default, underline on hover. */
a, .henko-link {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .henko-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* Selection */
::selection { background: var(--henko-coral); color: var(--henko-white); }

/* The H of Henko: split-color wordmark used inline.
   <span class="henko-mark">Henk<span>o</span></span>  */
.henko-mark { font-weight: 900; letter-spacing: var(--ls-display); color: var(--fg); }
.henko-mark > span { color: var(--accent); }



    /* ── RESET ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-sans);
      background: var(--henko-cream);
      color: var(--henko-black);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }

    /* ── UTILS ─────────────────────────────────────────── */
    .container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--henko-coral);
    }
    .eyebrow::before {
      content: ''; display: block;
      width: 24px; height: 1.5px;
      background: var(--henko-coral);
      flex-shrink: 0;
    }

    /* ── BUTTONS ────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-sans); font-size: 14px; font-weight: 700;
      padding: 13px 26px; border-radius: 6px;
      border: none; cursor: pointer;
      transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
      white-space: nowrap; text-decoration: none;
    }
    .btn-coral { background: var(--henko-coral); color: #fff; }
    .btn-coral:hover { background: var(--henko-coral-dark); color: #fff; text-decoration: none; }
    .btn-black { background: var(--henko-black); color: #fff; }
    .btn-black:hover { background: #2e2e2e; color: #fff; text-decoration: none; }
    .btn-ghost-white {
      background: transparent; color: #fff;
      border: 1.5px solid rgba(255,255,255,0.3);
    }
    .btn-ghost-white:hover { border-color: #fff; background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
    .btn-ghost-dark {
      background: transparent; color: var(--henko-black);
      border: 1.5px solid var(--henko-black);
    }
    .btn-ghost-dark:hover { background: var(--henko-black); color: #fff; text-decoration: none; }

    /* ── Efecto de barrido (sweep) ─────────────────────── */
    .btn-sweep { position: relative; overflow: hidden; }
    .btn-sweep::after {
      content: ""; position: absolute; top: 0; left: -60%;
      width: 40%; height: 100%;
      background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
      transform: skewX(-20deg);
      pointer-events: none;
      animation: btn-sweep-move 3s ease-in-out infinite;
    }
    @keyframes btn-sweep-move {
      0% { left: -60%; }
      45% { left: 130%; }
      100% { left: 130%; }
    }

    .text-sweep {
      background: linear-gradient(100deg, var(--henko-coral) 30%, #ffb3ab 50%, var(--henko-coral) 70%);
      background-size: 250% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: var(--henko-coral);
      animation: text-sweep-move 3.2s ease-in-out infinite;
    }
    @keyframes text-sweep-move {
      0% { background-position: 200% 0; }
      100% { background-position: -150% 0; }
    }

    /* ── Scroll reveal ──────────────────────────────────── */
    [data-reveal] {
      opacity: 0;
      transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
      will-change: opacity, transform;
    }
    [data-reveal="up"] { transform: translateY(52px); }
    [data-reveal="left"] { transform: translate3d(-72px, 22px, 0) rotate(-4deg); }
    [data-reveal="right"] { transform: translate3d(72px, 22px, 0) rotate(4deg); }
    [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }

    .ai-card[data-reveal], .service-card[data-reveal] {
      transition: opacity 950ms cubic-bezier(.22, 1.1, .36, 1), transform 950ms cubic-bezier(.22, 1.1, .36, 1);
    }

    .why-grid .why-card:nth-child(1) { transition-delay: 0ms; }
    .why-grid .why-card:nth-child(2) { transition-delay: 120ms; }
    .why-grid .why-card:nth-child(3) { transition-delay: 240ms; }

    .ai-grid .ai-card:nth-child(1) { transition-delay: 0ms; }
    .ai-grid .ai-card:nth-child(2) { transition-delay: 120ms; }
    .ai-grid .ai-card:nth-child(3) { transition-delay: 240ms; }

    .services-grid .service-card:nth-child(1) { transition-delay: 0ms; }
    .services-grid .service-card:nth-child(2) { transition-delay: 100ms; }
    .services-grid .service-card:nth-child(3) { transition-delay: 200ms; }
    .services-grid .service-card:nth-child(4) { transition-delay: 300ms; }

    .portfolio-grid .pf-item:nth-child(1) { transition-delay: 0ms; }
    .portfolio-grid .pf-item:nth-child(2) { transition-delay: 120ms; }
    .portfolio-grid .pf-item:nth-child(3) { transition-delay: 240ms; }

    .cta-final [data-reveal]:nth-child(1) { transition-delay: 0ms; }
    .cta-final [data-reveal]:nth-child(2) { transition-delay: 90ms; }
    .cta-final [data-reveal]:nth-child(3) { transition-delay: 180ms; }
    .cta-final [data-reveal]:nth-child(4) { transition-delay: 270ms; }
    .cta-final [data-reveal]:nth-child(5) { transition-delay: 360ms; }
    .cta-final [data-reveal]:nth-child(6) { transition-delay: 450ms; }

    .cta-final .btn-coral.btn-sweep {
      animation: cta-pulse 2.6s ease-in-out infinite;
    }
    @keyframes cta-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(229, 81, 81, 0.45); }
      50% { box-shadow: 0 0 0 14px rgba(229, 81, 81, 0); }
    }

    /* ── NAV ────────────────────────────────────────────── */
    .site-nav {
      position: sticky; top: 0; z-index: 200;
      height: 72px;
      background: rgba(244,245,233,0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--henko-cream-dark);
    }
    .site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
    .nav-logo img { width: auto; height: 30px; display: block; }
    .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
    .nav-links a {
      font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
      color: var(--henko-black);
      transition: color 140ms;
    }
    .nav-links a:hover { color: var(--henko-coral); }
    .nav-cta-wrap { display: flex; align-items: center; }
    .nav-hamburger {
      display: none; background: none; border: none; cursor: pointer;
      color: var(--henko-black); padding: 6px;
    }
    /* Mobile overlay menu */
    .mobile-menu {
      display: none; position: fixed; inset: 0; z-index: 300;
      background: var(--henko-black);
      flex-direction: column; padding: 32px 32px 48px;
      transform: translateX(100%);
      transition: transform 300ms var(--ease-out);
    }
    .mobile-menu.open { transform: translateX(0); }
    .mobile-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
    .mobile-menu-logo img { width: auto; height: 28px; filter: invert(1); }
    .mobile-menu-close { background: none; border: none; cursor: pointer; color: #fff; padding: 6px; }
    .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .mobile-menu a {
      display: block; font-size: 2rem; font-weight: 900;
      color: rgba(255,255,255,0.4); letter-spacing: -0.02em;
      padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
      transition: color 140ms;
    }
    .mobile-menu a:hover { color: #fff; }
    .mobile-menu .mobile-cta { margin-top: 32px; }

    /* ── HERO ───────────────────────────────────────────── */
    .hero {
      min-height: 100svh;
      background: var(--henko-black);
      display: flex; flex-direction: column; justify-content: center;
      padding: 100px 40px 72px;
      position: relative; overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .hero-bg-photo {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 20%;
      filter: grayscale(0.35) contrast(1.05);
      z-index: 0;
    }
    .hero-bg-overlay {
      position: absolute; inset: 0;
      background-image: linear-gradient(180deg, rgba(26,26,26,0.68) 0%, rgba(26,26,26,0.74) 55%, rgba(26,26,26,0.85) 100%);
      z-index: 1;
      opacity: 0;
      animation: hero-overlay-in 500ms ease-out 400ms forwards;
    }
    @keyframes hero-overlay-in {
      to { opacity: 1; }
    }
    .hero .container { position: relative; z-index: 2; }

    /* ── Secuencia de entrada del hero ───────────────────── */
    .hero-eyebrow, .hero-headline, .hero-sub, .hero-actions > a {
      opacity: 0;
      transform: translateY(22px);
      animation: hero-el-in 750ms var(--ease-out) forwards;
    }
    @keyframes hero-el-in {
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-eyebrow { animation-delay: 1s; }
    .hero-headline { animation-delay: 1.15s; }
    .hero-sub { animation-delay: 1.33s; }
    .hero-actions > a:nth-child(1) { animation-delay: 1.5s; }
    .hero-actions > a:nth-child(2) { animation-delay: 1.65s; }

    .hero-eyebrow { margin-bottom: 32px; }
    .hero-headline {
      font-family: var(--font-sans);
      font-weight: 900;
      font-size: clamp(1.8rem, 3.8vw, 3.25rem);
      line-height: 1.05;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: #fff;
      max-width: 950px;
      text-wrap: balance;
    }
    .hero-headline .coral { color: var(--henko-coral); }
    .hero-sub {
      margin-top: 36px;
      font-size: clamp(1rem, 1.8vw, 1.15rem);
      font-weight: 500;
      color: rgba(255,255,255,0.5);
      max-width: 500px;
      line-height: 1.65;
    }
    .hero-actions { margin-top: 48px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

    /* Decorative O background */
    .hero-bg-o {
      position: absolute;
      right: -6%; bottom: -12%;
      width: clamp(320px, 45vw, 640px);
      opacity: 0.035;
      pointer-events: none; user-select: none;
    }
    /* Bottom strip */
    .hero-strip {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 48px; border-top: 1px solid rgba(255,255,255,0.06);
      display: flex; align-items: center;
    }
    .hero-strip .container {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.2);
    }
    .hero-strip .dot { color: var(--henko-coral); margin: 0 10px; }
    .hero-strip .scroll-hint { display: flex; align-items: center; gap: 8px; }

    /* ── SERVICIOS ──────────────────────────────────────── */
    .services {
      background: var(--henko-cream);
      padding: 96px 0 80px;
      border-bottom: 1px solid var(--henko-cream-dark);
    }
    .services-header { margin-bottom: 52px; }
    .services-header h2 {
      margin-top: 16px;
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 900; letter-spacing: -0.03em; line-height: 1.05;
      max-width: 520px;
    }
    .services-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 1px; background: var(--henko-cream-dark);
      border: 1px solid var(--henko-cream-dark);
      border-radius: 8px;
    }
    .services-grid .service-card:nth-child(1) { border-top-left-radius: 8px; }
    .services-grid .service-card:nth-child(2) { border-top-right-radius: 8px; }
    .services-grid .service-card:nth-child(3) { border-bottom-left-radius: 8px; }
    .services-grid .service-card:nth-child(4) { border-bottom-right-radius: 8px; }
    @media (max-width: 960px) {
      .services-grid .service-card:nth-child(1) { border-radius: 8px 8px 0 0; }
      .services-grid .service-card:nth-child(2) { border-radius: 0; }
      .services-grid .service-card:nth-child(3) { border-radius: 0; }
      .services-grid .service-card:nth-child(4) { border-radius: 0 0 8px 8px; }
    }
    .service-card {
      background: var(--henko-cream);
      padding: 44px 40px;
      display: flex; flex-direction: column; gap: 16px;
      position: relative; overflow: hidden;
      transition: background 220ms var(--ease-out);
    }
    .service-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--henko-coral);
      transform: scaleY(0); transform-origin: bottom;
      transition: transform 260ms var(--ease-out);
    }
    .service-card:hover { background: #fff; }
    .service-card:hover::before { transform: scaleY(1); }
    .service-icon { color: var(--henko-coral); flex-shrink: 0; }
    .service-name {
      font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
    }
    .service-desc { font-size: 0.875rem; color: var(--henko-ink-70); line-height: 1.7; }
    .services-cta { margin-top: 44px; }

    /* ── POR QUÉ HENKO ──────────────────────────────────── */
    .why {
      background: var(--henko-black);
      padding: 96px 0;
    }
    .why-header { margin-bottom: 64px; }
    .why-header h2 {
      margin-top: 16px;
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 900; letter-spacing: -0.03em; line-height: 1.05;
      color: #fff; max-width: 560px;
    }
    .why-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1px; background: rgba(255,255,255,0.07);
    }
    .why-card {
      background: var(--henko-black);
      padding: 52px 40px;
      display: flex; flex-direction: column; gap: 20px;
    }
    .why-num {
      font-family: var(--font-condensed);
      font-size: 3.5rem; line-height: 1;
      color: var(--henko-coral); letter-spacing: -0.02em;
    }
    .why-title {
      font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em;
      color: #fff; line-height: 1.3;
    }
    .why-desc {
      font-size: 0.875rem; color: rgba(255,255,255,0.45); line-height: 1.75;
    }

    /* ── IA ──────────────────────────────────────────────── */
    .ai-section {
      background: var(--henko-cream);
      padding: 96px 0;
      border-bottom: 1px solid var(--henko-cream-dark);
      position: relative; overflow: hidden;
    }
    /* Decorative corner mark */
    .ai-deco {
      position: absolute; right: -64px; top: -64px;
      width: 320px; height: 320px; border-radius: 50%;
      border: 1px solid var(--henko-coral);
      opacity: 0.12; pointer-events: none;
    }
    .ai-deco-2 {
      position: absolute; right: -20px; top: -20px;
      width: 180px; height: 180px; border-radius: 50%;
      border: 1px solid var(--henko-coral);
      opacity: 0.1; pointer-events: none;
    }
    .ai-header { margin-bottom: 16px; }
    .ai-title {
      margin-top: 16px;
      font-size: clamp(1.9rem, 3.8vw, 3rem);
      font-weight: 900; letter-spacing: -0.03em; line-height: 1.05;
      max-width: 700px;
    }
    .ai-title em {
      font-family: var(--font-serif);
      font-style: italic; font-weight: 400;
      color: var(--henko-coral);
      letter-spacing: -0.01em;
    }
    .ai-subtitle {
      margin-top: 20px;
      font-size: 1.05rem; font-weight: 500;
      color: var(--henko-ink-70); line-height: 1.65;
      max-width: 620px;
    }
    .ai-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1px; background: var(--henko-cream-dark);
      border: 1px solid var(--henko-cream-dark);
      border-radius: 8px;
      margin-top: 56px;
    }
    .ai-grid .ai-card:nth-child(1) { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
    .ai-grid .ai-card:nth-child(3) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
    @media (max-width: 960px) {
      .ai-grid .ai-card:nth-child(1) { border-radius: 8px 8px 0 0; }
      .ai-grid .ai-card:nth-child(3) { border-radius: 0 0 8px 8px; }
    }
    .ai-card {
      background: var(--henko-cream);
      padding: 44px 36px;
      display: flex; flex-direction: column; gap: 18px;
      position: relative; overflow: hidden;
      transition: background 220ms var(--ease-out);
    }
    .ai-card:hover { background: #fff; }
    .ai-card-icon {
      width: 44px; height: 44px;
      background: var(--henko-black);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: var(--henko-coral); flex-shrink: 0;
      transition: background 220ms;
    }
    .ai-card:hover .ai-card-icon { background: var(--henko-coral); color: #fff; }
    .ai-card-title {
      font-size: 1.05rem; font-weight: 800;
      letter-spacing: -0.02em; line-height: 1.25;
    }
    .ai-card-desc {
      font-size: 0.875rem; color: var(--henko-ink-70); line-height: 1.7;
    }
    .ai-footer {
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid var(--henko-cream-dark);
      display: flex; align-items: center; gap: 14px;
    }
    .ai-footer-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--henko-coral); flex-shrink: 0;
    }
    .ai-footer-text {
      font-size: 0.8rem; font-weight: 600;
      color: var(--henko-ink-50); font-style: italic;
      line-height: 1.5;
    }
    @media (max-width: 960px) {
      .ai-grid { grid-template-columns: 1fr; }
    }

    /* ── PORTAFOLIO ─────────────────────────────────────── */
    .portfolio {
      background: #fff;
      padding: 96px 0 80px;
      border-bottom: 1px solid var(--henko-cream-dark);
    }
    .portfolio-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      flex-wrap: wrap; gap: 24px; margin-bottom: 48px;
    }
    .portfolio-header h2 {
      margin-top: 16px;
      font-size: clamp(1.7rem, 3.4vw, 3.25rem);
      font-weight: 900; letter-spacing: -0.03em; line-height: 1.05;
      max-width: 520px;
      text-wrap: balance;
    }

    /* 2-col asymmetric: left tall, right stacked 2 */
    .portfolio-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
      min-height: 560px;
    }
    .pf-item {
      position: relative; overflow: hidden; border-radius: 6px;
      cursor: pointer; background: #1A1410;
      display: block;
    }
    .pf-item-main { grid-row: 1 / 3; }
    .pf-fill {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 500ms var(--ease-out);
    }
    .pf-item:hover .pf-fill { transform: scale(1.04); }
    .pf-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.1) 100%);
      transition: background 220ms;
    }
    .pf-item:hover .pf-overlay {
      background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(229,81,81,0.1) 100%);
    }
    .pf-arrow {
      position: absolute; top: 18px; right: 18px;
      width: 38px; height: 38px;
      background: var(--henko-coral); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; color: #fff;
      opacity: 0; transform: scale(0.8) translateY(4px);
      transition: all 220ms var(--ease-out);
    }
    .pf-item:hover .pf-arrow { opacity: 1; transform: scale(1) translateY(0); }
    .pf-content {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 24px; color: #fff;
    }
    .pf-cat {
      font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--henko-coral); margin-bottom: 8px;
    }
    .pf-title {
      font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2;
    }
    .pf-item-main .pf-title { font-size: 1.3rem; }

    /* ── Placeholder de proyecto (páginas de caso de estudio) ─ */
    .project-placeholder {
      background: var(--henko-cream);
      padding: 160px 0;
      text-align: center;
      border-bottom: 1px solid var(--henko-cream-dark);
    }
    .project-placeholder .eyebrow { justify-content: center; margin-bottom: 20px; }
    .project-placeholder h1 {
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 900; letter-spacing: -0.03em; line-height: 1.05;
      margin-bottom: 20px;
    }
    .project-placeholder .placeholder-note {
      font-size: 1.05rem; color: var(--henko-ink-70);
      max-width: 480px; margin: 0 auto 36px;
    }

    /* ── CTA FINAL ──────────────────────────────────────── */
    .cta-final {
      background: var(--henko-black);
      padding: 128px 40px;
      text-align: center; position: relative; overflow: hidden;
    }
    .cta-bg-photo {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
      z-index: 0;
    }
    .cta-bg-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.68));
      z-index: 1;
    }
    .cta-final .container { position: relative; z-index: 2; }
    .cta-final .eyebrow { margin-bottom: 28px; }
    .cta-headline {
      font-family: var(--font-condensed);
      font-size: clamp(2.8rem, 8vw, 6.5rem);
      color: #fff; line-height: 0.97; letter-spacing: -0.02em;
      max-width: 720px; margin: 0 auto 28px;
    }
    .cta-headline .coral { color: var(--henko-coral); }
    .cta-sub {
      font-size: 1.05rem; font-weight: 500;
      color: rgba(255,255,255,0.45); margin-bottom: 52px;
    }
    .cta-phone {
      margin-top: 24px; font-size: 13px;
      color: rgba(255,255,255,0.3);
    }
    .cta-phone a { color: var(--henko-coral); font-weight: 700; }
    .cta-phone a:hover { color: var(--henko-coral-dark); }

    /* ── Formulario de contacto (CTA final) ─────────────── */
    .cta-form {
      max-width: 560px; margin: 40px auto 0; text-align: left;
    }
    .cta-form-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    .cta-form-field {
      margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px;
    }
    .cta-form-field label {
      font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }
    .cta-form-field input, .cta-form-field textarea {
      background: rgba(255,255,255,0.06);
      border: 1.5px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      padding: 12px 14px;
      color: #fff;
      font-family: var(--font-sans);
      font-size: 14px;
      transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
    }
    .cta-form-field input::placeholder, .cta-form-field textarea::placeholder { color: rgba(255,255,255,0.3); }
    .cta-form-field input:focus, .cta-form-field textarea:focus {
      outline: none; border-color: var(--henko-coral); background: rgba(255,255,255,0.1);
    }
    .cta-form-field textarea { resize: vertical; min-height: 90px; font-family: inherit; }
    .cta-form-submit { margin-top: 8px; width: 100%; justify-content: center; }
    .cta-form-status {
      margin-top: 14px; font-size: 13px; text-align: center; min-height: 18px;
    }
    .cta-form-status.success { color: #7CD992; }
    .cta-form-status.error { color: #ff8a80; }
    @media (max-width: 600px) {
      .cta-form-row { grid-template-columns: 1fr; }
    }

    /* ── FOOTER ─────────────────────────────────────────── */
    .site-footer {
      background: var(--henko-black);
      border-top: 1px solid rgba(255,255,255,0.07);
      padding: 64px 0 32px;
    }
    .footer-top {
      display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 28px;
    }
    .footer-brand-logo { width: auto; height: 26px; filter: invert(1); margin-bottom: 18px; }
    .footer-brand p { font-size: 13px; color: rgba(255,255,255,0.35); line-height: 1.65; max-width: 220px; }
    .footer-col h4 {
      font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.25); margin-bottom: 18px;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .footer-col a { font-size: 14px; color: rgba(255,255,255,0.55); transition: color 140ms; }
    .footer-col a:hover { color: var(--henko-coral); }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 16px;
    }
    .footer-copy { font-size: 11px; color: rgba(255,255,255,0.22); }
    .footer-social { display: flex; align-items: center; gap: 10px; }
    .social-link {
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.4);
      transition: all 140ms var(--ease-out);
    }
    .social-link:hover { border-color: var(--henko-coral); color: var(--henko-coral); }

    /* ── RESPONSIVE ─────────────────────────────────────── */
    @media (max-width: 960px) {
      .container { padding: 0 28px; }
      .nav-links, .nav-cta-wrap { display: none; }
      .nav-hamburger { display: block; }
      .mobile-menu { display: flex; }
      .services-grid { grid-template-columns: 1fr; }
      .why-grid { grid-template-columns: 1fr; }
      .why-card { padding: 40px 28px; }
      .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        min-height: unset;
      }
      .pf-item-main { grid-row: 1; grid-column: 1 / 3; }
      .pf-item-main .pf-fill { position: relative; aspect-ratio: 16/9; }
      .pf-item-main { aspect-ratio: 16/9; }
      .pf-item:not(.pf-item-main) { aspect-ratio: 4/3; }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .container { padding: 0 20px; }
      .hero { padding: 80px 20px 60px; }
      .cta-final { padding: 96px 20px; }
      .portfolio-grid { grid-template-columns: 1fr; }
      .pf-item-main { grid-column: 1; }
      .portfolio-header { flex-direction: column; align-items: flex-start; }
      .footer-top { grid-template-columns: 1fr; gap: 32px; }
      .services { padding: 72px 0 60px; }
      .why { padding: 72px 0; }
      .portfolio { padding: 72px 0 60px; }
    }
  
    /* ════════════════════════════════════════════════════
       BLOG
       ════════════════════════════════════════════════════ */

    /* ── Listado ─────────────────────────────────────────── */
    .blog-hero {
      background: var(--henko-black);
      padding: 140px 0 64px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .blog-hero h1 {
      margin-top: 16px;
      font-size: clamp(2.2rem, 4.5vw, 3.5rem);
      font-weight: 900; letter-spacing: -0.03em; line-height: 1.05;
      color: #fff; max-width: 640px;
    }
    .blog-hero p {
      margin-top: 20px;
      font-size: 1.05rem; color: rgba(255,255,255,0.5);
      max-width: 520px; line-height: 1.6;
    }

    .blog-section { background: var(--henko-cream); padding: 72px 0 96px; }
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .blog-card {
      display: flex; flex-direction: column;
      background: #fff; border-radius: 8px; overflow: hidden;
      border: 1px solid var(--henko-cream-dark);
      transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    }
    .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .blog-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #1A1410; }
    .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); display: block; }
    .blog-card:hover .blog-card-img img { transform: scale(1.05); }
    .blog-card-cat {
      position: absolute; top: 14px; left: 14px;
      font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      color: #fff; background: rgba(26,26,26,0.65); backdrop-filter: blur(4px);
      padding: 6px 10px; border-radius: 4px;
    }
    .blog-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .blog-card-title {
      font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3;
      color: var(--henko-black);
    }
    .blog-card-excerpt { font-size: 0.9rem; color: var(--henko-ink-70); line-height: 1.6; flex: 1; }
    .blog-card-meta {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; color: var(--henko-ink-50);
      padding-top: 12px; border-top: 1px solid var(--henko-cream-dark); margin-top: 4px;
    }
    .blog-card-meta .dot { color: var(--henko-coral); }
    .blog-card-link {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 700; color: var(--henko-coral);
      margin-top: 4px;
    }

    /* ── Post individual ─────────────────────────────────── */
    .breadcrumb {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 28px;
      list-style: none;
    }
    .breadcrumb a { color: rgba(255,255,255,0.6); }
    .breadcrumb a:hover { color: #fff; }
    .breadcrumb .current { color: rgba(255,255,255,0.85); }

    .blog-post-header {
      background: var(--henko-black);
      padding: 140px 0 56px;
    }
    .blog-post-cat { margin-bottom: 20px; }
    .blog-post-title {
      font-size: clamp(2rem, 4.2vw, 3.25rem);
      font-weight: 900; letter-spacing: -0.03em; line-height: 1.08;
      color: #fff; max-width: 780px;
    }
    .blog-post-meta {
      display: flex; align-items: center; gap: 10px;
      margin-top: 24px; font-size: 13px; color: rgba(255,255,255,0.4);
    }
    .blog-post-meta .dot { color: var(--henko-coral); }

    .blog-post-hero-img { background: #1A1410; }
    .blog-post-hero-img img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; }

    .blog-post-body { background: #fff; padding: 64px 0 8px; }
    .blog-post-body .container { max-width: 760px; }
    .blog-post-body h2 {
      font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
      margin: 44px 0 18px; color: var(--henko-black);
    }
    .blog-post-body h3 {
      font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;
      margin: 32px 0 14px; color: var(--henko-black);
    }
    .blog-post-body p { font-size: 1.05rem; line-height: 1.8; color: var(--henko-ink-70); margin-bottom: 22px; }
    .blog-post-body ul, .blog-post-body ol { margin: 0 0 22px; padding-left: 24px; }
    .blog-post-body li { font-size: 1.05rem; line-height: 1.8; color: var(--henko-ink-70); margin-bottom: 8px; }
    .blog-post-body a { text-decoration: underline; text-underline-offset: 2px; }
    .blog-post-body img { max-width: 100%; border-radius: 8px; margin: 28px 0; }
    .blog-post-body blockquote {
      border-left: 3px solid var(--henko-coral);
      padding: 4px 0 4px 24px; margin: 28px 0;
      font-size: 1.15rem; font-style: italic; color: var(--henko-black);
    }
    .blog-post-body strong { color: var(--henko-black); }

    .blog-cta-box {
      margin: 20px 0 48px; padding: 36px;
      background: var(--henko-cream); border-radius: 12px;
      border: 1px solid var(--henko-cream-dark);
    }
    .blog-cta-box h4 { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 10px; }
    .blog-cta-box p { font-size: 0.95rem; color: var(--henko-ink-70); margin-bottom: 20px; }
    .blog-cta-box-actions { display: flex; gap: 12px; flex-wrap: wrap; }

    .related-posts { margin: 8px 0 48px; }
    .related-posts h4 {
      font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--henko-ink-50); margin-bottom: 20px;
    }
    .related-posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .blog-post-footer {
      padding: 32px 0 64px;
      border-top: 1px solid var(--henko-cream-dark);
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
    }
    .blog-post-footer a { font-size: 14px; font-weight: 700; }

    @media (max-width: 960px) {
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
      .related-posts-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .blog-grid { grid-template-columns: 1fr; }
      .blog-hero { padding: 120px 0 48px; }
      .blog-post-header { padding: 110px 0 40px; }
    }