/* stylesv3-overrides.css — load AFTER styles.css */

/* ===== VIEW TRANSITIONS — Clay-style cross-page morph =====
   Cross-document opt-in. Browser pairs elements w/ matching
   view-transition-name on origin and destination pages, then animates
   morph automatically (position, size, opacity). Falls back to normal
   navigation on Firefox/older browsers. */
@view-transition {
  navigation: auto;
}

/* Root fade — old page fades out, new page fades in. Snappy 280ms. */
::view-transition-old(root) {
  animation: vt-fade-out 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 320ms cubic-bezier(0.4, 0, 0.2, 1) 120ms both;
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* Paired-element morphs — same logo lives in both pages, browser animates
   from origin rect to destination rect. No JS ghost needed for ms/fr. */
.ms-feature__logo                                        { view-transition-name: ms-logo; }
body:has(.case-hero) .case-hero__logo                    { view-transition-name: ms-logo; }
.fr-feature__logo                                        { view-transition-name: fr-logo; }
body:has(.case-hero) .case-hero__logo[alt*="FreshRide"]  { view-transition-name: fr-logo; }

/* Daleska — no brand logo on home, use JS-injected soft gradient ghost
   from click point. Case-hero photo on destination. */
body:has(.case-hero) .case-hero__logo[alt*="Daleska"]    { view-transition-name: dk-logo-morph; }

/* Smoother morph timing for the paired elements (override default 250ms) */
::view-transition-old(ms-logo),
::view-transition-new(ms-logo),
::view-transition-old(fr-logo),
::view-transition-new(fr-logo),
::view-transition-old(dk-logo-morph),
::view-transition-new(dk-logo-morph) {
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Honor reduced-motion: kill all transition animations */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ===== BUG FIX: restore banner on homepage ===== */
/* Top scarcity banner deprecated — moved into .proof__scarcity inside proof section. Hide globally. */
.banner { display: none !important; }

/* ===== Plain-Spanish tagline under service-card title (v3) =====
   Sits between "areqo design/systems/custom" and the full description.
   Bigger than the body text, smaller than the title, weight-medium for
   immediate scan: "Páginas web que venden". */
.service-card__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* ===== CASE-STUDY hero logo wrapped in <a> — preserves layout, adds hover lift ===== */
.case-hero__logo-link {
  display: inline-block;
  line-height: 0;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}
.case-hero__logo-link:hover { transform: translateY(-2px); opacity: 0.9; }
.case-hero__logo-link img { display: block; }

/* ===== CASE-STUDY GLOBAL CONTRAST FIXES =====
   styles.css inherited a dark-theme palette (:root --text: #FAFAFA white,
   --accent: #FFFFFF) but body was later overridden to white. Several
   components still pull from those vars and render white-on-white on
   case-study pages. Body:has() scope = applies only when a .case-hero
   exists on the page (i.e. portfolio case studies). */
body:has(.case-hero) .nav__link--active {
  color: #0a0a0a;
  background: rgba(10, 10, 10, 0.06);
}
body:has(.case-hero) .nav__link--active:hover {
  background: rgba(10, 10, 10, 0.1);
}
/* Any orphan h1/h2/h3 inside a case study that lacks an explicit color
   class falls back to dark text so it never disappears on a light bg. */
body:has(.case-hero) main h1:not([class]),
body:has(.case-hero) main h2:not([class]),
body:has(.case-hero) main h3:not([class]),
body:has(.case-hero) main h4:not([class]) {
  color: #0a0a0a;
}
/* The .case-stack section IS dark on purpose. Force lift any nested
   inline text colors that might be inherited dark from elsewhere. */
body:has(.case-hero) .case-stack,
body:has(.case-hero) .case-stack * {
  color: #fafafa;
}
body:has(.case-hero) .case-stack__grid span { color: #a3a3a3; }
body:has(.case-hero) .case-stack .case-label { color: #a3a3a3; }

/* Hero gallery reveal lock — disables pointer interactions during drum-roll
   entrance so animation plays in full even if cursor parks over carousel.
   Removed after 4.5s by hero-gallery.js. */
.hg.hg--reveal-locked,
.hg.hg--reveal-locked .hg__canvas {
  pointer-events: none !important;
  cursor: default !important;
}

/* ===== SOCIAL PROOF SECTION (FreshRide + Daleska) =====
   Two-card grid replacing the deprecated Mar y Selva case-study block.
   Visual sisterhood (same grid, same author block) with lean/warm variants
   to read as masculine vs feminine without breaking system cohesion. */
.social-proof {
  padding: 96px 0;
  background: #f5f5f5;
  color: #0a0a0a;
}
.social-proof__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.social-proof__header .section-label { color: #525252; }
.social-proof__header .section-title {
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.social-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.proof-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 32px 32px 28px;
  border: 1px solid #e5e5e5;
  transition: border-color 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.proof-card:hover {
  border-color: #0a0a0a;
  transform: translateY(-3px);
}
.proof-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
}
.proof-card__logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
}
.proof-card__logo--rounded {
  border-radius: 50%;
  object-fit: cover;
  width: 76px;
  height: 76px;
  border: 2px solid #f5f5f5;
}
.proof-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #525252;
  padding: 6px 10px;
  background: #f5f5f5;
  border-radius: 4px;
  white-space: nowrap;
}
.proof-card__quote { margin: 0 0 28px; }
.proof-card__quote p {
  font-size: 18px;
  line-height: 1.55;
  color: #0a0a0a;
  margin: 0;
  letter-spacing: -0.005em;
}
.proof-card__foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.proof-card__author {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.proof-card__author strong {
  font-size: 15px;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: -0.005em;
}
.proof-card__author span {
  font-size: 13px;
  color: #525252;
  line-height: 1.4;
}
.proof-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.proof-card__cta {
  font-size: 14px;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}
.proof-card__cta:hover { color: #525252; }
.proof-card__cta--ghost {
  color: #525252;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: -0.005em;
}

/* Variant — LEAN (Carlos León / FreshRide): sharper, gridded, low-fluff */
.proof-card--lean {
  border-radius: 4px;
}
.proof-card--lean .proof-card__quote p {
  font-family: var(--font-body);
  font-weight: 400;
}

/* Variant — WARM (Daleska): softer corners, subtle warm tint, generous space */
.proof-card--warm {
  border-radius: 22px;
  background: linear-gradient(180deg, #fffaf7 0%, #ffffff 60%);
  border-color: #f3e8e3;
}
.proof-card--warm:hover { border-color: #d4a097; }
.proof-card--warm .proof-card__quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 19px;
}
.proof-card--warm .proof-card__foot { border-top-color: #f3e8e3; }
.proof-card--warm .proof-card__tag {
  background: #fff0ea;
  color: #8b4a3a;
}

@media (max-width: 880px) {
  .social-proof { padding: 64px 0; }
  .social-proof__header { margin-bottom: 36px; }
  .social-proof__grid { grid-template-columns: 1fr; gap: 16px; }
  .proof-card { padding: 26px 24px 22px; }
  .proof-card__quote p { font-size: 16px; }
  .proof-card--warm .proof-card__quote p { font-size: 17px; }
}
/* Dark body bg for HOME only — case study / portfolio / about / faq etc
   live on white. :not(:has(.case-hero)) excludes any page that has a
   case-study hero (mar-y-selva, freshride, daleska). */
body:not(:has(.case-hero)) { background: var(--bg) !important; }
body:has(.case-hero) { background: #ffffff !important; background-image: none !important; }

/* ===== PROCESS SECTION ===== */
.process {
  background: var(--bg);
  padding: var(--section-py) 0;
}

.process__header {
  text-align: center;
  margin-bottom: 64px;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.process__step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  text-align: center;
  transition: border-color var(--duration) var(--ease);
  position: relative;
}

.process__step:hover {
  border-color: var(--accent);
}

.process__number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 20px;
}

.process__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius);
  margin: 0 auto 20px;
}

.process__step-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.process__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Connector lines between steps — desktop only */
.process__connector {
  display: none;
}

@media (min-width: 769px) {
  .process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -17px;
    width: 32px;
    height: 0;
    border-top: 2px dashed var(--border-strong);
    transform: translateY(-50%);
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .process__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .process__step::after {
    display: none !important;
  }
}

/* ===== TESTIMONIAL SECTION ===== */
.testimonial {
  background: #FFFFFF;
  padding: var(--section-py) 0;
}

.testimonial__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.testimonial__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
  color: #FBBF24;
  font-size: 20px;
}

.testimonial__quote {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  line-height: 1.5;
  color: #0A0A0A;
  margin-bottom: 32px;
  position: relative;
}

.testimonial__quote::before {
  content: '\201C';
  display: block;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: #D4D4D4;
  margin-bottom: 8px;
}

.testimonial__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.testimonial__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__name {
  font-size: 16px;
  font-weight: 600;
  color: #0A0A0A;
}

.testimonial__role {
  font-size: 14px;
  color: #6B6B6B;
}

/* ===== FAQ HOME SECTION ===== */
.faq-home {
  background: var(--bg);
  padding: var(--section-py) 0;
}

.faq-home__header {
  text-align: center;
  margin-bottom: 48px;
}

.faq-home__list {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.faq-home__item {
  border-bottom: 1px solid var(--border);
}

.faq-home__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.faq-home__head:hover {
  color: var(--accent);
}

.faq-home__head svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform var(--duration) var(--ease);
}

.faq-home__head[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.faq-home__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}

.faq-home__head[aria-expanded="true"] + .faq-home__body {
  max-height: 400px;
  opacity: 1;
}

.faq-home__body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  padding-bottom: 20px;
}

/* ===== TRUST BADGES ===== */
.trust-badges {
  background: var(--bg);
  padding: 32px 0;
}

.trust-badges__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  flex-wrap: wrap;
}

.trust-badges__item {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgb(181, 181, 181);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ===== LEGAL PAGES (privacidad, terminos) ===== */
.legal { padding: 32px 0 96px; background: #ffffff; }
.legal__container { max-width: 720px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: #0a0a0a;
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li {
  font-size: 16px;
  line-height: 1.65;
  color: #262626;
  margin: 0 0 14px;
}
.legal ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.legal li {
  padding-left: 22px;
  position: relative;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  background: #0a0a0a;
  border-radius: 50%;
}
.legal strong { color: #0a0a0a; font-weight: 600; }
.legal a {
  color: #0a0a0a;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal a:hover { text-decoration-thickness: 2px; }

/* ===== PROOF SCARCITY (replaces top banner) ===== */
.proof__scarcity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 22px;
  margin: 0 auto 24px;
  background: #0a0a0a;
  border-radius: 999px;
  max-width: max-content;
  flex-wrap: wrap;
}
.proof__scarcity-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #fafafa;
  padding: 4px 10px;
  border-radius: 4px;
}
.proof__scarcity-text {
  font-size: 14px;
  color: #d4d4d4;
  margin: 0;
  letter-spacing: -0.005em;
}
.proof__scarcity-count { color: #fafafa; font-weight: 600; }
.proof__scarcity-link {
  font-size: 13px;
  font-weight: 600;
  color: #fafafa;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 14px;
  border: 1px solid rgba(250, 250, 250, 0.2);
  border-radius: 999px;
  transition: background 180ms ease, border-color 180ms ease;
}
.proof__scarcity-link:hover {
  background: rgba(250, 250, 250, 0.08);
  border-color: rgba(250, 250, 250, 0.4);
}
@media (max-width: 640px) {
  .proof__scarcity { gap: 10px; padding: 12px 16px; border-radius: 18px; }
  .proof__scarcity-text { font-size: 13px; text-align: center; }
}

/* X close button for scarcity strip — dismissible per-session */
.proof__scarcity-close {
  background: transparent;
  border: 0;
  padding: 6px;
  margin-left: 4px;
  color: #a3a3a3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 180ms ease, background 180ms ease;
}
.proof__scarcity-close:hover {
  color: #fafafa;
  background: rgba(255, 255, 255, 0.08);
}
.proof__scarcity--hidden { display: none !important; }

/* ===== CASE STATUS BANNER (in-dev / in-vivo) ===== */
.case-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 16px;
  margin: 0 0 28px;
  border: 1px solid #e5e5e5;
  background: #fafafa;
}
.case-status__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
  animation: case-status-pulse 2s ease-in-out infinite;
}
.case-status--building {
  background: #fff7ed;
  border-color: #fed7aa;
}
.case-status--building .case-status__dot { background: #ea580c; box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); }
.case-status--live {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.case-status--live .case-status__dot { background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
.case-status > div { flex: 1; min-width: 0; }
.case-status strong {
  display: block;
  font-size: 14px;
  color: #0a0a0a;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.case-status p {
  margin: 0;
  font-size: 13.5px;
  color: #404040;
  line-height: 1.55;
}
.case-status a {
  color: #0a0a0a;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.case-status a:hover { text-decoration-thickness: 2px; }
@keyframes case-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== CASE STEPS (numbered ordered list in case prose) ===== */
.case-prose ol.case-steps {
  list-style: none;
  counter-reset: case-step;
  padding: 0;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case-prose ol.case-steps > li {
  counter-increment: case-step;
  position: relative;
  padding: 16px 20px 16px 56px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #262626;
}
.case-prose ol.case-steps > li::before {
  content: counter(case-step, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #0a0a0a;
  letter-spacing: -0.02em;
}
.case-prose ol.case-steps > li strong { color: #0a0a0a; font-weight: 600; }

/* ===== CASE HERO HEADING (title + logo side by side) ===== */
.case-hero__heading {
  display: flex;
  align-items: center;
  gap: 48px;
  margin: 0 0 24px;
}
.case-hero__heading .case-hero__title { margin: 0; flex: 1; min-width: 0; }
.case-hero__logo {
  flex-shrink: 0;
  width: 280px;
  height: 280px;
  object-fit: contain;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
/* Wordmark variant — wide aspect ratio (1472x376). Filter brightness(0)
   forces the white-on-transparent source PNG to render pure black on the
   light hero bg, matching the home-page treatment. */
.case-hero__logo--wordmark {
  width: 320px;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
}
.case-hero__logo--rounded {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e5e5e5;
}
@media (max-width: 900px) {
  .case-hero__heading { gap: 28px; }
  .case-hero__logo { width: 200px; height: 200px; }
  .case-hero__logo--rounded { width: 160px; height: 160px; }
}
@media (max-width: 640px) {
  .case-hero__heading {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
  }
  .case-hero__logo { width: 160px; height: 160px; }
  .case-hero__logo--rounded { width: 120px; height: 120px; }
}

/* ===== SERVICES CASCADE REVEAL =====
   Per-card choreographed entrance. Each card:
   1. Wipes in via clip-path top-down (900ms expo-out) + subtle lift + scale
   2. Internal elements (icon → title → desc → features → cta) cascade in
      with built-in transition-delay so the card unfolds itself.
   JS stagger: 280ms between cards. Internal: 80ms per item. */

.services__grid .service-card {
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 600ms ease-out;
  will-change: clip-path, transform, opacity;
}
.services__grid .service-card.is-revealing {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: inset(0 0 0 0);
}

/* Internal cascade — every part starts veiled, settles with stagger */
.services__grid .service-card .service-card__num,
.services__grid .service-card .service-card__icon,
.services__grid .service-card .service-card__badge,
.services__grid .service-card .service-card__title,
.services__grid .service-card .service-card__desc,
.services__grid .service-card .service-card__features li,
.services__grid .service-card .service-card__link {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 520ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 620ms cubic-bezier(0.25, 1, 0.5, 1);
}

.services__grid .service-card.is-revealing .service-card__num,
.services__grid .service-card.is-revealing .service-card__icon,
.services__grid .service-card.is-revealing .service-card__badge,
.services__grid .service-card.is-revealing .service-card__title,
.services__grid .service-card.is-revealing .service-card__desc,
.services__grid .service-card.is-revealing .service-card__features li,
.services__grid .service-card.is-revealing .service-card__link {
  opacity: 1;
  transform: translateY(0);
}

.services__grid .service-card.is-revealing .service-card__num     { transition-delay: 220ms; }
.services__grid .service-card.is-revealing .service-card__icon    { transition-delay: 280ms; }
.services__grid .service-card.is-revealing .service-card__badge   { transition-delay: 340ms; }
.services__grid .service-card.is-revealing .service-card__title   { transition-delay: 380ms; }
.services__grid .service-card.is-revealing .service-card__desc    { transition-delay: 500ms; }
.services__grid .service-card.is-revealing .service-card__features li:nth-child(1) { transition-delay: 620ms; }
.services__grid .service-card.is-revealing .service-card__features li:nth-child(2) { transition-delay: 700ms; }
.services__grid .service-card.is-revealing .service-card__features li:nth-child(3) { transition-delay: 780ms; }
.services__grid .service-card.is-revealing .service-card__features li:nth-child(4) { transition-delay: 860ms; }
.services__grid .service-card.is-revealing .service-card__link    { transition-delay: 980ms; }

@media (prefers-reduced-motion: reduce) {
  .services__grid .service-card,
  .services__grid .service-card .service-card__num,
  .services__grid .service-card .service-card__icon,
  .services__grid .service-card .service-card__badge,
  .services__grid .service-card .service-card__title,
  .services__grid .service-card .service-card__desc,
  .services__grid .service-card .service-card__features li,
  .services__grid .service-card .service-card__link {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ===== SERVICES ICONS — hover micro-animation =====
   Custom SVG icons mirror the overview 3D shapes (stacked frames,
   hub+satellites, interlocking rings). Hover lifts + tilts the icon. */
.services__grid .service-card .service-card__icon svg {
  transition:
    transform 540ms cubic-bezier(0.25, 1, 0.5, 1),
    opacity 320ms ease-out;
  transform-origin: 50% 50%;
}
.services__grid .service-card:hover .service-card__icon svg {
  transform: scale(1.08) rotate(-3deg);
}

/* ===== SERVICES CARD UPGRADES (A + D + F) ===== */

/* D — Editorial number header "01 / 02 / 03" */
.services__grid .service-card__num {
  display: block;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-muted, #8a8a8a);
  margin-bottom: 18px;
  position: relative;
  padding-left: 24px;
}
.services__grid .service-card__num::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform: translateY(-50%);
}

/* A — SVG icons stroke-draw on reveal.
   pathLength="1" on each shape normalizes total length to 1,
   so dasharray:1 + dashoffset:1 means "fully hidden". Animate
   to dashoffset:0 = fully drawn. Stagger via nth-child delay. */
.services__grid .service-card__icon svg rect,
.services__grid .service-card__icon svg circle,
.services__grid .service-card__icon svg line,
.services__grid .service-card__icon svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 950ms cubic-bezier(0.25, 1, 0.5, 1);
}
.services__grid .service-card.is-revealing .service-card__icon svg rect,
.services__grid .service-card.is-revealing .service-card__icon svg circle,
.services__grid .service-card.is-revealing .service-card__icon svg line,
.services__grid .service-card.is-revealing .service-card__icon svg path {
  stroke-dashoffset: 0;
}
.services__grid .service-card.is-revealing .service-card__icon svg > *:nth-child(1) { transition-delay: 360ms; }
.services__grid .service-card.is-revealing .service-card__icon svg > *:nth-child(2) { transition-delay: 440ms; }
.services__grid .service-card.is-revealing .service-card__icon svg > *:nth-child(3) { transition-delay: 520ms; }
.services__grid .service-card.is-revealing .service-card__icon svg > *:nth-child(4) { transition-delay: 600ms; }
.services__grid .service-card.is-revealing .service-card__icon svg > *:nth-child(5) { transition-delay: 680ms; }
.services__grid .service-card.is-revealing .service-card__icon svg > *:nth-child(6) { transition-delay: 760ms; }
.services__grid .service-card.is-revealing .service-card__icon svg > *:nth-child(7) { transition-delay: 840ms; }

/* F — Live pulsing dot in systems card badge */
.services__grid .service-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.services__grid .service-card__live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: live-dot-pulse 1800ms ease-out infinite;
}
.services__grid .service-card__live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.45);
  animation: live-dot-ring 1800ms ease-out infinite;
  pointer-events: none;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
@keyframes live-dot-ring {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* a11y — respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .services__grid .service-card__icon svg rect,
  .services__grid .service-card__icon svg circle,
  .services__grid .service-card__icon svg line,
  .services__grid .service-card__icon svg path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .services__grid .service-card__live-dot,
  .services__grid .service-card__live-dot::after {
    animation: none !important;
  }
}

/* ===== HG HERO CTA (indexv2 only — added below subtitle in hero) =====
   Sits inside .hg__headline (absolute top-left over WebGL carousel).
   Does NOT break the carousel pointer events because z-index keeps it
   above the canvas, and pointer-events are scoped to the buttons only. */
.hg__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 18px;
  white-space: normal;
}
/* Minimal button — vanilla translation of the shadcn MinimalButton spec.
   Diagonal hatch overlay via ::before pseudo-element, soft drop shadow,
   no border. Pattern color = --hg-cta-pattern (defaults to white over the
   dark bg). */
.hg__cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 120px;
  height: 40px;
  padding: 0 22px;
  background: #0A0A0A;
  color: #FAFAFA;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(13px, 1.4vw, 14.5px);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  box-shadow: 0 10px 30px 10px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  isolation: isolate;
  transition: transform 220ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 220ms ease, background 180ms ease;
  pointer-events: auto;
  --hg-cta-pattern: #FAFAFA;
}
.hg__cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    315deg,
    var(--hg-cta-pattern) 0,
    var(--hg-cta-pattern) 1px,
    transparent 0,
    transparent 50%
  );
  background-size: 10px 10px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.hg__cta-btn > * {
  position: relative;
  z-index: 1;
}
.hg__cta-btn:hover {
  background: #1f1f1f;
  transform: translateY(-1.5px);
  box-shadow: 0 14px 36px 12px rgba(0, 0, 0, 0.18);
}
.hg__cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 20px 6px rgba(0, 0, 0, 0.16);
}
.hg__cta-btn svg { flex-shrink: 0; }
.hg__cta-ghost {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(12.5px, 1.3vw, 13.5px);
  font-weight: 500;
  color: #6B6B6B;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 180ms ease;
  pointer-events: auto;
}
.hg__cta-ghost:hover { color: #0A0A0A; }

@media (max-width: 600px) {
  .hg__cta {
    margin-top: 14px;
    gap: 10px 16px;
  }
  .hg__cta-btn { padding: 10px 14px; font-size: 13px; }
}

/* ===== FINAL CTA — Guarantee label below buttons (indexv2) ===== */
.final-cta__guarantee {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 22px auto 0;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.55));
}
.final-cta__guarantee svg {
  opacity: 0.7;
  flex-shrink: 0;
}

/* ===== FINAL CTA — Tightened layout for shorter copy (indexv2) =====
   Title "Hablemos del tuyo." + 10-word desc need different proportions
   vs the original 2-line title + 30-word paragraph. */
.final-cta__inner {
  text-align: center;
}
.final-cta__title {
  margin-bottom: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.final-cta__desc {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 36px;
  font-size: clamp(14px, 1.6vw, 16px);
  opacity: 0.78;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .final-cta__desc {
    white-space: normal;
    max-width: 320px;
    font-size: 14px;
  }
}

/* ===== SERVICES section header — readable on dark BG =====
   Earlier override forced .services .section-title to #0a0a0a (black) +
   .section-label to gray/white-bg combo, assuming white page BG. With
   body now dark, that combo is invisible. Flip to light. */
.services .section-label,
#servicios .section-label {
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.services .section-label::before,
#servicios .section-label::before {
  background: rgba(255, 255, 255, 0.45) !important;
}
.services .section-title,
#servicios .section-title {
  color: #FAFAFA !important;
}

/* ===== MAR Y SELVA — dedicated editorial spread =====
   Cream background w/ deep amazonian green ink. Logo centered up top,
   two-piece asymmetric layout: hero portrait left, carta wide right
   offset down ~22vh. Each piece has eyebrow + one-line value caption. */
.ms-feature {
  position: relative;
  padding: 120px 0 140px;
  background: #f5f1eb;
  color: #102218;
  overflow: hidden;
}
.ms-feature__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 28%, rgba(45,106,79,0.08), transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(45,106,79,0.06), transparent 60%);
  pointer-events: none;
}
.ms-feature .container { position: relative; }

.ms-feature__masthead {
  text-align: center;
  margin: 0 auto 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.ms-feature__logo {
  max-width: 360px;
  width: 70%;
  height: auto;
  display: block;
  /* Source PNG is white-on-transparent. brightness(0) forces every visible
     pixel to pure black while preserving the alpha channel — guaranteed
     legible on cream background. */
  filter: brightness(0);
}

/* Spread — hero left (larger), carta right (smaller, offset down) */
.ms-feature__spread {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
  max-width: 1480px;
  margin: 0 auto;
}
.ms-feature__piece { margin: 0; }
.ms-feature__piece--hero { padding-top: 0; }
.ms-feature__piece--carta { padding-top: clamp(120px, 22vh, 220px); }

/* Frame = anchor wrapping the photo. No fixed aspect-ratio so image
   renders at its true ratio (1600x907 hero, 1904x1069 carta) — no crop. */
.ms-feature__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #0f2419;
  box-shadow:
    0 30px 60px -20px rgba(15, 36, 25, 0.35),
    0 0 0 1px rgba(15, 36, 25, 0.06);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-feature__frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 38px 72px -22px rgba(15, 36, 25, 0.5),
    0 0 0 1px rgba(45, 106, 79, 0.4);
}
.ms-feature__frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease;
}
.ms-feature__frame:hover img { transform: scale(1.03); }

/* Video overlay — sits above static image, fades in on hover (JS-driven).
   Inherits frame border-radius via overflow:hidden on parent. */
.ms-feature__frame-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 380ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background: #0f2419;
}
.ms-feature__frame--has-video.is-video-active .ms-feature__frame-video {
  opacity: 1;
  transform: scale(1);
}
.ms-feature__frame--has-video.is-video-active img {
  opacity: 0;
  transition: opacity 280ms ease 120ms;
}

/* Hover affordance — "Abrir ↗" badge */
.ms-feature__frame-go {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0f2419;
  background: #f5f1eb;
  padding: 8px 14px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 36, 25, 0.25);
}
.ms-feature__frame:hover .ms-feature__frame-go,
.ms-feature__frame:focus-visible .ms-feature__frame-go {
  opacity: 1;
  transform: translateY(0);
}

/* Caption — Slack-style: big bold title, body line, tag dots */
.ms-feature__caption {
  margin-top: 28px;
  max-width: 540px;
}
.ms-feature__caption-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0 0 10px;
}
.ms-feature__caption-desc {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: #3a4a40;
  margin: 0;
}

@media (max-width: 880px) {
  .ms-feature { padding: 80px 0 100px; }
  .ms-feature__masthead { margin-bottom: 48px; gap: 16px; }
  .ms-feature__logo { max-width: 240px; width: 80%; }
  .ms-feature__spread {
    grid-template-columns: 1fr;
    row-gap: 56px;
  }
  .ms-feature__piece--carta { padding-top: 0; }
}

/* ===== FRESHRIDE — sibling feature spread =====
   Photo left half, content stack (logo / desc / CTA) right half.
   Cool charcoal palette to distinguish from ms-feature's amazonian green. */
.fr-feature {
  position: relative;
  padding: 120px 0 140px;
  background: #0f1115;
  color: #e8eaed;
  overflow: hidden;
}
.fr-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 32%, rgba(70, 130, 180, 0.08), transparent 55%),
    radial-gradient(circle at 82% 72%, rgba(70, 130, 180, 0.06), transparent 60%);
  pointer-events: none;
}
.fr-feature .container { position: relative; }

.fr-feature__spread {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: 1480px;
  margin: 0 auto;
}

/* Photo — clickable, hover lifts + reveals badge */
.fr-feature__photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #050608;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-feature__photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 38px 72px -22px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(70, 130, 180, 0.45);
}
.fr-feature__photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-feature__photo:hover img { transform: scale(1.03); }
.fr-feature__photo-go {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0f1115;
  background: #e8eaed;
  padding: 8px 14px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.fr-feature__photo:hover .fr-feature__photo-go,
.fr-feature__photo:focus-visible .fr-feature__photo-go {
  opacity: 1;
  transform: translateY(0);
}

/* Right content stack */
.fr-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  max-width: 500px;
}
.fr-feature__logo {
  max-width: 240px;
  width: 100%;
  height: auto;
  display: block;
}
.fr-feature__desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  color: #c8ccd1;
  margin: 0;
  letter-spacing: -0.005em;
}
/* Quote block — sits between desc and CTA, light theme for dark bg */
.fr-feature__quote {
  margin: 0;
  padding: 18px 22px;
  border-left: 2px solid rgba(70, 130, 180, 0.55);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 6px 6px 0;
}
.fr-feature__quote p {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.55;
  color: #d4d8de;
  margin: 0 0 12px;
  font-style: italic;
}
.fr-feature__quote footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.fr-feature__quote strong {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  color: #e8eaed;
}
.fr-feature__quote span {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8590;
}

.fr-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0f1115;
  background: #e8eaed;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 220ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.fr-feature__cta:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(70, 130, 180, 0.3);
}

@media (max-width: 880px) {
  .fr-feature { padding: 80px 0 100px; }
  .fr-feature__spread {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .fr-feature__content { max-width: 100%; gap: 22px; }
  .fr-feature__logo { max-width: 200px; }
}

/* ===== DALESKA — white editorial spread =====
   Photo + content both anchored LEFT of the canvas, ~60% width — right
   side stays empty for visual breath. Pure white background distinguishes
   from cream Mar y Selva and charcoal FreshRide. */
.dk-feature {
  position: relative;
  padding: 120px 0 140px;
  background: #ffffff;
  color: #0a0a0a;
  overflow: hidden;
}
.dk-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 30%, rgba(200, 112, 86, 0.06), transparent 55%),
    radial-gradient(circle at 88% 80%, rgba(200, 112, 86, 0.04), transparent 60%);
  pointer-events: none;
}
.dk-feature .container { position: relative; }

.dk-feature__inner {
  max-width: 1480px;
  margin: 0 auto;
  /* Photo left (7fr), content right (5fr) — content anchored toward bottom
     so it sits lower in the column than the photo's top edge. */
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: clamp(40px, 5vw, 80px);
  align-items: end;
}

.dk-feature__photo {
  grid-column: 1;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #f2eee9;
  box-shadow:
    0 30px 60px -20px rgba(10, 10, 10, 0.18),
    0 0 0 1px rgba(10, 10, 10, 0.04);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dk-feature__photo:hover {
  transform: translateY(-4px);
  box-shadow:
    0 38px 72px -22px rgba(10, 10, 10, 0.28),
    0 0 0 1px rgba(200, 112, 86, 0.4);
}
.dk-feature__photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dk-feature__photo:hover img { transform: scale(1.03); }
.dk-feature__photo-go {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: #0a0a0a;
  padding: 8px 14px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.dk-feature__photo:hover .dk-feature__photo-go,
.dk-feature__photo:focus-visible .dk-feature__photo-go {
  opacity: 1;
  transform: translateY(0);
}

.dk-feature__content {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 500px;
  padding-bottom: clamp(20px, 4vh, 40px);
}
.dk-feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0;
}
.dk-feature__desc {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: #525252;
  margin: 0;
}
/* Quote block — dark variant for white bg */
.dk-feature__quote {
  margin: 0;
  padding: 18px 22px;
  border-left: 2px solid rgba(200, 112, 86, 0.55);
  background: rgba(200, 112, 86, 0.04);
  border-radius: 0 6px 6px 0;
}
.dk-feature__quote p {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0 0 12px;
  font-style: italic;
}
/* 5/5 rating under the FreshRide and Daleska quotes: both clients gave it
   (confirmed by Arthur, 30 sep 2026). Gold is tuned per background for >=3:1. */
.quote-stars {
  display: flex;
  gap: 3px;
  margin: 0 0 12px;
  color: var(--star, #b8740a);
}
.quote-stars svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.fr-feature__quote .quote-stars { --star: #f5b82e; }
.dk-feature__quote .quote-stars { --star: #b8740a; }

.dk-feature__quote footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}
.dk-feature__quote strong {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  color: #0a0a0a;
}
.dk-feature__quote span {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a6a5a;
}

.dk-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: #0a0a0a;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 220ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.18);
  margin-top: 8px;
}
.dk-feature__cta:hover {
  background: #c87056;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(200, 112, 86, 0.35);
}

@media (max-width: 880px) {
  .dk-feature { padding: 80px 0 100px; }
  .dk-feature__inner { grid-template-columns: 1fr; row-gap: 40px; align-items: start; }
  .dk-feature__content { grid-column: 1; max-width: 100%; padding-bottom: 0; }
}

/* ===== FOUNDER — Arthur intro section =====
   Warm cream bg breaks white→white rhythm. 9:16 portrait left, content
   right. Builds trust before FAQ by putting a face to the brand. */
.founder {
  position: relative;
  padding: 120px 0;
  background: #f5f1eb;
  color: #102218;
  overflow: hidden;
}
.founder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(45,106,79,0.06), transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(200,112,86,0.05), transparent 60%);
  pointer-events: none;
}
.founder .container { position: relative; }
.founder__spread {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}
.founder__photo {
  margin: 0;
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 380px;
  overflow: hidden;
  border-radius: 8px;
  background: #0f2419;
  box-shadow:
    0 30px 60px -20px rgba(15, 36, 25, 0.35),
    0 0 0 1px rgba(15, 36, 25, 0.06);
}
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.founder__photo:hover img { transform: scale(1.03); }

.founder__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
}
.founder__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2d6a4f;
  margin-bottom: 4px;
}
.founder__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #102218;
  margin: 0 0 8px;
}
.founder__bio {
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: #2a3a32;
  margin: 0;
}
.founder__bio--secondary { color: #4a5a52; }
.founder__ctas {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.founder__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5f1eb;
  background: #102218;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 220ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
  box-shadow: 0 4px 12px rgba(15, 36, 25, 0.18);
}
.founder__cta:hover {
  background: #2d6a4f;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(45, 106, 79, 0.3);
}
.founder__cta--ghost {
  color: #102218;
  background: transparent;
  box-shadow: none;
  border: 1px solid rgba(16, 34, 24, 0.3);
}
.founder__cta--ghost:hover {
  background: transparent;
  border-color: #102218;
  color: #102218;
}

@media (max-width: 880px) {
  .founder { padding: 72px 0 88px; }
  .founder__spread {
    grid-template-columns: 1fr;
    row-gap: 36px;
    justify-items: center;
    text-align: center;
  }
  .founder__photo { max-width: 280px; width: 80%; }
  .founder__content { align-items: center; }
  .founder__bio { text-align: left; }
  .founder__ctas { justify-content: center; gap: 12px; }
  .founder__cta { width: 100%; justify-content: center; min-height: 48px; }
}

/* =================================================================
   RESPONSIVE OPTIMIZATION PASS — applied across hero, services,
   tools, ms/fr/dk features, banner, FAQ, final-cta, footer.
   Mobile-first, touch targets ≥44px, typography legible, no horizontal
   scroll. Triggered at three breakpoints: tablet (≤900px), phone
   (≤640px), small phone (≤380px).
   ================================================================= */

/* --- Tablet (≤900px) — adjustments before full mobile collapse --- */
@media (max-width: 900px) {
  /* Hero — bring headline down so it doesn't overlap nav on tablet */
  .hg__headline { top: clamp(96px, 14vw, 130px); left: 24px; }

  /* Banner scarcity — center text + wrap */
  .proof__scarcity { flex-direction: column; align-items: stretch; text-align: center; }
  .proof__scarcity-text { font-size: 14px; }
  .proof__scarcity-link { align-self: center; }
}

/* --- Phone (≤640px) — main mobile layout --- */
@media (max-width: 640px) {
  /* Nav — transparent on hero, solid once scrolled. Title now sits below
     the nav zone so no bleed-through issue. */
  body:has(.hg) .nav:not(.nav--scrolled) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }
  .nav.nav--scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: saturate(140%) blur(10px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  /* Hero — STABLE viewport via 100svh prevents resize loop when IG/Safari
     hide/show their browser chrome on scroll. Title sits absolute on top
     w/ solid white card so canvas behind doesn't bleed; canvas fills the
     rest of the section underneath. */
  .hg {
    /* svh = small viewport (excludes chrome) — STABLE across IG/Safari
       address-bar toggle. Fallback to vh for older browsers. */
    height: 100vh !important;
    height: 100svh !important;
    min-height: 560px !important;
    display: block !important;
    overflow: hidden;
  }
  .hg__headline {
    position: absolute !important;
    top: 84px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    max-width: none !important;
    padding: 24px 16px 20px !important;
    background: #FFFFFF;
    z-index: 30;
  }
  .hg__canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .hg__title {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
  }
  .hg__cta-btn {
    min-height: 44px;
    padding: 12px 18px !important;
    font-size: 14px !important;
    display: inline-flex;
    align-items: center;
  }

  /* Overview accordion — touch targets + spacing */
  .overview__head {
    min-height: 48px;
    padding: 12px 0;
    font-size: 16px;
  }
  .overview__body { font-size: 15px !important; line-height: 1.55; }
  .overview__lead { font-size: 18px; line-height: 1.4; }

  /* Tools section — keep aspect, shrink padding */
  .tools__card { padding: 24px 16px !important; }
  .tools__title { font-size: clamp(22px, 6vw, 28px) !important; }

  /* Services 3-card grid — already stacks. Tighten internals. */
  .service-card { padding: 28px 24px !important; }
  .service-card__title { font-size: 22px !important; }
  .service-card__tagline { font-size: 16px !important; }
  .service-card__desc { font-size: 14px !important; line-height: 1.55; }
  .service-card__features li { font-size: 13.5px !important; }
  .service-card__link { min-height: 44px; display: inline-flex; align-items: center; }

  /* Mar y Selva — tighten editorial spread */
  .ms-feature { padding: 64px 0 80px; }
  .ms-feature__masthead { margin-bottom: 36px; }
  .ms-feature__spread { row-gap: 40px; }
  .ms-feature__caption-title { font-size: 22px !important; }
  .ms-feature__caption-desc { font-size: 15px !important; }
  .ms-feature__frame-go {
    font-size: 10px;
    padding: 6px 10px;
    bottom: 10px;
    right: 10px;
    /* Always visible on touch — hover-reveal useless w/o mouse */
    opacity: 0.95 !important;
    transform: translateY(0) !important;
  }

  /* FreshRide — content stack alignment + readable on dark bg */
  .fr-feature { padding: 64px 0 80px; }
  .fr-feature__content { gap: 18px; }
  .fr-feature__logo { max-width: 180px; }
  .fr-feature__desc { font-size: 17px !important; }
  .fr-feature__quote { padding: 14px 16px; }
  .fr-feature__quote p { font-size: 14.5px; }
  .fr-feature__cta {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 12px;
    width: 100%;
    justify-content: center;
  }
  .fr-feature__photo-go {
    opacity: 0.95 !important;
    transform: translateY(0) !important;
    font-size: 10px;
    padding: 6px 10px;
  }

  /* Daleska — left-anchored on desktop, full stack mobile */
  .dk-feature { padding: 64px 0 80px; }
  .dk-feature__content { gap: 16px; }
  .dk-feature__title { font-size: 24px !important; }
  .dk-feature__desc { font-size: 15px !important; }
  .dk-feature__quote { padding: 14px 16px; }
  .dk-feature__quote p { font-size: 14.5px; }
  .dk-feature__cta {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 12px;
    width: 100%;
    justify-content: center;
  }
  .dk-feature__photo-go {
    opacity: 0.95 !important;
    transform: translateY(0) !important;
    font-size: 10px;
    padding: 6px 10px;
  }

  /* FAQ — touch target on every accordion head */
  .faq-home__head {
    min-height: 56px;
    padding: 16px 0;
    font-size: 15px;
  }

  /* Final CTA — stack buttons full-width, larger tap zone */
  .final-cta__buttons { flex-direction: column; gap: 12px; }
  .final-cta__buttons .btn {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: 15px;
  }
  .final-cta__title { font-size: clamp(28px, 8vw, 36px) !important; }
  .final-cta__desc { font-size: 15px !important; max-width: 100% !important; }

  /* Footer — stack columns, smaller logos row */
  .footer__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer__col { gap: 8px; }

  /* Container — ensure ≥16px gutter on phone */
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* --- Small phone (≤380px) — iPhone SE etc, tighter still --- */
@media (max-width: 380px) {
  .hg__title { font-size: 22px !important; }
  .overview__lead { font-size: 16px; }
  .service-card { padding: 22px 18px !important; }
  .ms-feature__caption-title,
  .dk-feature__title { font-size: 20px !important; }
  .fr-feature__desc { font-size: 15px !important; }
  .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* --- Universal touch-friendly link minimums --- */
@media (hover: none) and (pointer: coarse) {
  .nav__link, .footer__link, .faq-home__head, .overview__head {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Hide hover-only badges on touch (already redundant w/ direct tap) */
  .ms-feature__frame-go,
  .fr-feature__photo-go,
  .dk-feature__photo-go {
    display: none;
  }
}

/* ===== COSTO DE NO ACTUAR =====
   Editorial layout: one hero stat dominates, two supporting stats below.
   No cards. Magazine-feel with generous whitespace. */
.cost-section {
  padding: clamp(100px, 12vw, 180px) 0 clamp(80px, 10vw, 120px);
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* --- Hero stat block --- */
.cost-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(64px, 8vw, 100px);
}
.cost-hero__label {
  font-size: clamp(14px, 1.2vw, 17px);
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin-bottom: clamp(16px, 2vw, 28px);
  max-width: 380px;
}
.cost-hero__figure {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 0.85;
}
.cost-hero__currency {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: rgba(255,255,255,0.35);
  letter-spacing: -0.02em;
}
.cost-hero__value {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 9rem);
  font-weight: 800;
  color: #fafafa;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.cost-hero__math {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.03em;
  margin-top: clamp(12px, 1.5vw, 20px);
}
.cost-hero__note {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 14px);
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  margin-top: 10px;
  font-style: italic;
}
.cost-hero__right {
  padding-bottom: clamp(8px, 1vw, 16px);
}
.cost-hero__pull {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
  margin-bottom: clamp(24px, 3vw, 36px);
  letter-spacing: -0.01em;
}

/* --- Secondary stats row --- */
.cost-secondary {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 56px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cost-stat {
  flex: 1;
}
.cost-stat__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.cost-stat__number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 700;
  color: #fafafa;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.cost-stat__text {
  font-size: clamp(14px, 1.1vw, 15.5px);
  color: rgba(255,255,255,0.50);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 360px;
}
.cost-stat__link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.cost-stat__link:hover {
  color: rgba(255,255,255,0.85);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .cost-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cost-hero__value {
    font-size: 4rem;
  }
  .cost-secondary {
    flex-direction: column;
    gap: 32px;
  }
  .cost-stat__divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
}

/* ===== SERVICE CARDS v4 — accent colors + bigger presence =====
   Removes editorial nums, adds per-line accent via CSS custom prop.
   Tagline promoted above title for scan-first hierarchy. */

/* Accent custom properties */
.service-card--design  { --svc-accent-h: 210; --svc-accent-s: 45%; --svc-accent-l: 55%; }
.service-card--systems { --svc-accent-h: 155; --svc-accent-s: 45%; --svc-accent-l: 55%; }
.service-card--custom  { --svc-accent-h: 35;  --svc-accent-s: 45%; --svc-accent-l: 55%; }

/* Hide leftover num styling if any persist */
.services__grid .service-card__num { display: none !important; }

/* Card container — more padding, accent border top */
.services__grid .service-card {
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 3.5vw, 44px) !important;
  border-top: 2px solid hsl(var(--svc-accent-h, 210), var(--svc-accent-s, 45%), var(--svc-accent-l, 55%)) !important;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;
}
.services__grid .service-card:hover {
  border-color: hsl(var(--svc-accent-h), var(--svc-accent-s), calc(var(--svc-accent-l) + 10%)) !important;
  box-shadow: 0 8px 32px hsla(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l), 0.08) !important;
}

/* Icon — bigger, accent background glow */
.services__grid .service-card .service-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l), 0.08);
  border-radius: 14px;
  margin-bottom: 20px;
  transition: background 0.3s ease;
}
.services__grid .service-card:hover .service-card__icon {
  background: hsla(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l), 0.14);
}
.services__grid .service-card .service-card__icon svg {
  color: hsl(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l));
}

/* Tagline — promoted, accent-tinted, scan-first */
.services__grid .service-card .service-card__tagline {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: hsl(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l));
  margin: 0 0 8px;
  order: -1;
}

/* Title — bigger */
.services__grid .service-card .service-card__title {
  font-size: clamp(22px, 2.2vw, 28px) !important;
  margin-bottom: 14px;
}

/* Description */
.services__grid .service-card .service-card__desc {
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.65;
}

/* Features list — accent bullet */
.services__grid .service-card .service-card__features li::before {
  background: hsl(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l)) !important;
}

/* Link — accent color */
.services__grid .service-card .service-card__link {
  color: hsl(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l));
}
.services__grid .service-card .service-card__link svg {
  stroke: hsl(var(--svc-accent-h), var(--svc-accent-s), var(--svc-accent-l));
}

/* ── 3D Card tilt (Aceternity-style) ──
   `perspective` sits on each CARD, not on the grid. On the grid there is one
   shared vanishing point at the grid's centre, so a card off to the side has
   its lifted children projected sideways and the text visibly shears. Per
   card, every vanishing point is its own centre and the lift reads straight. */
.services__grid .service-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  will-change: transform;
}
.services__grid .service-card:hover {
  transform: none !important;
}
.services__grid .service-card > * {
  transform-style: preserve-3d;
  transition: transform 200ms ease-linear;
}
.services__grid .service-card:hover .service-card__icon {
  transform: translateZ(40px);
}
.services__grid .service-card:hover .service-card__tagline {
  transform: translateZ(25px);
}
.services__grid .service-card:hover .service-card__title {
  transform: translateZ(30px);
}
.services__grid .service-card:hover .service-card__desc {
  transform: translateZ(20px);
}
.services__grid .service-card:hover .service-card__features {
  transform: translateZ(15px);
}
.services__grid .service-card:hover .service-card__link {
  transform: translateZ(35px);
}
.services__grid .service-card:hover .service-card__badge {
  transform: translateZ(35px);
}
@media (prefers-reduced-motion: reduce) {
  .services__grid .service-card { perspective: none; transform-style: flat; }
  .services__grid .service-card > * { transition: none; }
  .services__grid .service-card:hover .service-card__icon,
  .services__grid .service-card:hover .service-card__tagline,
  .services__grid .service-card:hover .service-card__title,
  .services__grid .service-card:hover .service-card__desc,
  .services__grid .service-card:hover .service-card__features,
  .services__grid .service-card:hover .service-card__link,
  .services__grid .service-card:hover .service-card__badge {
    transform: none;
  }
}


/* ========================================================================
   UNDIM — proyecto propio. Espejo de los spreads de cliente: contenido a
   la izquierda, marco ancho a la derecha y subido. Fondo en el hueso
   cálido de la marca, no el blanco puro de Daleska.
   ======================================================================== */
.un-feature {
  position: relative;
  padding: 120px 0 140px;
  background: #fbfaf9;
  color: #0a0a0a;
  overflow: hidden;
}
.un-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 22%, rgba(220, 168, 80, 0.10), transparent 55%),
    radial-gradient(circle at 10% 85%, rgba(220, 168, 80, 0.05), transparent 60%);
  pointer-events: none;
}
.un-feature .container { position: relative; }

.un-feature__inner {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.un-feature__content { grid-column: 1; }

.un-feature__tag {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a6c24;
  border: 1px solid rgba(192, 143, 53, 0.4);
  border-radius: 999px;
  padding: 6px 14px;
}

.un-feature__logo {
  display: block;
  width: clamp(150px, 15vw, 210px);
  height: auto;
  margin: 26px 0 0;
}

.un-feature__desc {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  color: #3d3a36;
}

/* Studio note: our own voice, deliberately not styled as a client quote
   (no quote marks, no name, no colored rule). */
.un-feature__note {
  margin: 28px 0 0;
  padding-top: 22px;
  max-width: 46ch;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: #1f1d1a;
  text-wrap: pretty;
}
.un-feature__note-by {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #5c4a22;
}

.un-feature__specs {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}
.un-feature__specs li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
  font-size: 14px;
  color: #56524c;
}
.un-feature__specs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dca850;
}

.un-feature__cta {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 10, 10, 0.25);
  padding-bottom: 4px;
  transition: color 240ms ease, border-color 240ms ease;
}
.un-feature__cta:hover {
  color: #8a6c24;
  border-color: #dca850;
}

/* --- Marco ------------------------------------------------------------ */
.un-feature__piece {
  grid-column: 2;
  margin: 0;
  /* Sube respecto al bloque de texto: rompe la línea base compartida. */
  transform: translateY(-28px);
}

.un-feature__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #f2eee9;
  box-shadow:
    0 30px 60px -20px rgba(10, 10, 10, 0.18),
    0 0 0 1px rgba(10, 10, 10, 0.04);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.un-feature__frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 38px 72px -22px rgba(10, 10, 10, 0.28),
    0 0 0 1px rgba(220, 168, 80, 0.5);
}
.un-feature__frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease;
}
.un-feature__frame:hover img { transform: scale(1.03); }

.un-feature__frame-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 380ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background: #f2eee9;
}
.un-feature__frame--has-video.is-video-active .un-feature__frame-video {
  opacity: 1;
  transform: scale(1);
}
.un-feature__frame--has-video.is-video-active img {
  opacity: 0;
  transition: opacity 280ms ease 120ms;
}

.un-feature__frame-go {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbfaf9;
  background: #0a0a0a;
  padding: 8px 14px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.25);
}
.un-feature__frame:hover .un-feature__frame-go,
.un-feature__frame:focus-visible .un-feature__frame-go {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .un-feature { padding: 80px 0 90px; }
  .un-feature__inner {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .un-feature__content,
  .un-feature__piece { grid-column: 1; }
  .un-feature__piece { transform: none; }
  .un-feature__desc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .un-feature__frame,
  .un-feature__frame img,
  .un-feature__frame-video,
  .un-feature__frame-go { transition: none; }
  .un-feature__frame:hover { transform: none; }
  .un-feature__frame:hover img { transform: none; }
}

/* --- undim: pie del marco, igual que en los demás proyectos ------------ */
.un-feature__caption {
  margin-top: 24px;
  max-width: 540px;
}
.un-feature__caption-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.01em;
  margin: 0;
  color: #0a0a0a;
}
.un-feature__caption-desc {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #56524c;
}

/* ========================================================================
   SASO DECANTS — catálogo con panel. Único bloque oscuro de la página y
   único con marcos superpuestos: la grilla monta sobre la esquina de la
   portada. Café de la propia marca.
   ======================================================================== */
.sd-feature {
  position: relative;
  padding: 130px 0 150px;
  background: #2a1a12;
  color: #fffced;
  overflow: hidden;
}
.sd-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(230, 208, 111, 0.12), transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(230, 208, 111, 0.06), transparent 60%);
  pointer-events: none;
}
.sd-feature .container { position: relative; }

.sd-feature__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.sd-feature__logo {
  display: block;
  width: clamp(150px, 14vw, 200px);
  height: auto;
}
.sd-feature__tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e6d06f;
  border: 1px solid rgba(230, 208, 111, 0.45);
  border-radius: 999px;
  padding: 6px 14px;
}

/* Portada ancha a la izquierda; la grilla monta sobre su esquina. */
.sd-feature__spread {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
}
.sd-feature__piece { margin: 0; }
.sd-feature__piece--portada { width: 78%; }
.sd-feature__piece--grilla {
  position: absolute;
  right: 0;
  bottom: -14%;
  width: 40%;
}

.sd-feature__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #1c1009;
  box-shadow:
    0 40px 80px -28px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(230, 208, 111, 0.16);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-feature__frame:hover {
  transform: translateY(-4px);
  box-shadow:
    0 50px 96px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(230, 208, 111, 0.5);
}
.sd-feature__frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease;
}
.sd-feature__frame:hover img { transform: scale(1.03); }

.sd-feature__frame-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 380ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background: #1c1009;
}
.sd-feature__frame--has-video.is-video-active .sd-feature__frame-video {
  opacity: 1;
  transform: scale(1);
}
.sd-feature__frame--has-video.is-video-active img {
  opacity: 0;
  transition: opacity 280ms ease 120ms;
}

.sd-feature__frame-go {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2a1a12;
  background: #e6d06f;
  padding: 8px 14px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.sd-feature__frame:hover .sd-feature__frame-go,
.sd-feature__frame:focus-visible .sd-feature__frame-go {
  opacity: 1;
  transform: translateY(0);
}

/* El texto arranca pasada la grilla superpuesta. */
.sd-feature__content {
  max-width: 1480px;
  margin: clamp(110px, 12vw, 170px) auto 0;
  display: grid;
  grid-template-columns: 6fr 5fr;
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.sd-feature__desc {
  grid-column: 1;
  margin: 0;
  max-width: 48ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(255, 252, 237, 0.78);
}
.sd-feature__specs {
  grid-column: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(230, 208, 111, 0.22);
}
.sd-feature__specs li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid rgba(230, 208, 111, 0.22);
  font-size: 14px;
  color: rgba(255, 252, 237, 0.72);
}
.sd-feature__specs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e6d06f;
}
.sd-feature__cta {
  grid-column: 1;
  justify-self: start;
  margin-top: 28px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fffced;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 252, 237, 0.3);
  padding-bottom: 4px;
  transition: color 240ms ease, border-color 240ms ease;
}
.sd-feature__cta:hover {
  color: #e6d06f;
  border-color: #e6d06f;
}

@media (max-width: 900px) {
  .sd-feature { padding: 80px 0 90px; }
  /* Sin superposición en móvil: se apilan y no compiten por el toque. */
  .sd-feature__piece--portada { width: 100%; }
  .sd-feature__piece--grilla {
    position: static;
    width: 82%;
    margin: 22px 0 0 auto;
  }
  .sd-feature__content {
    margin-top: 44px;
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .sd-feature__desc,
  .sd-feature__specs,
  .sd-feature__cta { grid-column: 1; }
  .sd-feature__desc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-feature__frame,
  .sd-feature__frame img,
  .sd-feature__frame-video,
  .sd-feature__frame-go { transition: none; }
  .sd-feature__frame:hover { transform: none; }
  .sd-feature__frame:hover img { transform: none; }
}