/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Description: A child theme for Blocksy, tailored for Graftivo Design & Print.
Author: Graftivo
Author URI: https://graftivo.com/
Template: blocksy
Version: 1.0.46
*/

/* ==========================================================================
   Graftivo Design System (Design Tokens)
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #1b2d5c;       /* Deep Navy (Trust & Solidity) */
  --color-secondary: #1a73e8;     /* Google Blue (CTAs & Action) */
  --color-secondary-rgb: 26, 115, 232;  /* same color as --color-secondary, as RGB components for use in rgba() */
  --color-secondary-hover: #155cb0; /* Darkened shade of --color-secondary, used on hover */
  --color-tertiary: #2f8f83;      /* Teal/Menta (Creativity & Design) */
  --color-highlight: #ffd580;     /* Gold (Stars & Highlights) */
  
  /* Backgrounds & Text */
  --color-bg-base: #ffffff;       /* Main Pure White */
  --color-bg-alt: #f9fafb;        /* Light Zinc Gray (Alternate sections) */
  --color-text: #1b2d5c;          /* Default strong text (Navy) */
  --color-text-secondary: #3f3f46; /* High contrast Zinc Gray for readability */
  
  /* Borders & Grids */
  --color-border: #e4e4e7;        /* Clean Zinc border */
  --color-border-hover: #c8c8cd;

  /* Designer canvas guides */
  --graftivo-gd-guide-bleed: rgba(34, 113, 177, 0.9);
  --graftivo-gd-guide-trim: rgba(214, 54, 56, 0.85);

  /* Typography */
  --font-family-headings: "Montserrat", sans-serif;
  --font-family-body: "Inter", sans-serif;
  --font-family-mono: "Geist Mono", "JetBrains Mono", monospace;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* ==========================================================================
   Graftivo Designer — Artwork path chooser (Phase 3)
   ========================================================================== */

.graftivo-designer-choice-form {
  position: relative;
  z-index: 1;
}

.graftivo-designer-choice-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}

.graftivo-designer-choice-back:hover {
  color: var(--color-secondary);
}

.graftivo-designer-choice-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-tertiary);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.graftivo-designer-choice-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.graftivo-designer-choice-fields label > span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.graftivo-designer-choice-fields {
  display: flex;
  align-items: end;
  gap: 12px;
}

.graftivo-designer-choice-fields select,
.graftivo-designer-choice-fields input {
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.2;
}

.graftivo-designer-choice-grid {
  display: grid;
}

.graftivo-designer-choice-card {
  position: relative;
  appearance: none;
  border-radius: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.graftivo-designer-choice-card:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 3px;
}

.graftivo-designer-choice-icon {
  display: grid;
  place-items: center;
}

.graftivo-designer-choice-icon svg {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.graftivo-designer-choice-card-copy strong {
  display: block;
  font-family: var(--font-family-headings);
}

.graftivo-designer-choice-card-copy small {
  display: block;
  color: currentColor;
}

.graftivo-designer-upload-alternative {
  display: inline-block;
  margin-top: var(--space-lg);
  color: var(--color-secondary);
  font-weight: 700;
}

.graftivo-designer-upload-entry {
  display: grid;
  min-height: 72vh;
  align-items: center;
}

.graftivo-designer-upload-panel {
  position: relative;
  width: min(620px, 100%);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 56px);
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 8%, transparent);
  text-align: center;
}

.graftivo-designer-upload-panel h1 {
  margin: 0 0 var(--space-xl);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.graftivo-designer-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 16px;
}

.graftivo-designer-upload-panel .graftivo-designer-upload-button {
  display: inline-flex;
  min-width: 180px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.graftivo-designer-upload-panel .graftivo-designer-upload-button:hover,
.graftivo-designer-upload-panel .graftivo-designer-upload-button:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-tertiary);
  color: var(--color-bg-base);
}

.graftivo-designer-upload-panel .graftivo-designer-upload-button:disabled {
  cursor: wait;
  opacity: .65;
}

.graftivo-designer-upload-status {
  min-height: 24px;
  margin: var(--space-md) 0 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.graftivo-designer-upload-status-error {
  color: var(--color-secondary);
}

/* Artwork approval clickwrap — shared by the editor and PDF route. */
.graftivo-designer-approval {
  inset: 0;
  box-sizing: border-box;
  width: min(680px, calc(100vw - (var(--space-lg) * 2)));
  max-height: calc(100dvh - (var(--space-lg) * 2));
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  background: transparent;
  color: var(--color-text);
}

.graftivo-designer-approval::backdrop {
  background: color-mix(in srgb, var(--color-primary) 82%, transparent);
}

.graftivo-designer-approval-card {
  box-sizing: border-box;
  padding: clamp(var(--space-xl), 6vw, var(--space-2xl));
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 24px 72px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.graftivo-designer-approval-mark {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-lg);
  place-items: center;
  border: 1px solid var(--color-tertiary);
  border-radius: 50%;
  color: var(--color-tertiary);
  font-size: 22px;
  font-weight: 700;
}

.graftivo-designer-approval-card h2 {
  margin: 0 0 var(--space-xl);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: clamp(26px, 5vw, 34px);
  letter-spacing: -.035em;
  line-height: 1.1;
}

.graftivo-designer-proof,
.graftivo-designer-proof-file {
  margin: 0 0 var(--space-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.graftivo-designer-proof[hidden],
.graftivo-designer-proof-file[hidden] {
  display: none;
}

.graftivo-designer-proof-head {
  display: flex;
  padding: 12px var(--space-md);
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.graftivo-designer-proof-head strong {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.graftivo-designer-proof-head span {
  color: var(--color-text-secondary);
  font-size: 11px;
}

.graftivo-designer-proof-grid {
  display: grid;
  padding: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.graftivo-designer-proof-grid figure {
  min-width: 0;
  margin: 0;
}

.graftivo-designer-proof-grid img {
  display: block;
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  background: var(--color-bg-base);
}

.graftivo-designer-proof-grid figcaption {
  padding-top: 6px;
  color: var(--color-text-secondary);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.graftivo-designer-proof-file {
  display: grid;
  padding: var(--space-md);
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
}

.graftivo-designer-proof-file > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.graftivo-designer-proof-file div {
  display: grid;
  min-width: 0;
  gap: var(--space-xs);
}

.graftivo-designer-proof-file strong {
  overflow: hidden;
  color: var(--color-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-designer-proof-file small {
  color: var(--color-text-secondary);
}

.graftivo-designer-approval-check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-md);
  align-items: start;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.65;
  cursor: pointer;
}

.graftivo-designer-approval-check input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--color-tertiary);
  font-size: 16px;
}

.graftivo-designer-approval-check a {
  color: var(--color-secondary);
  font-weight: 700;
}

.graftivo-designer-approval-status {
  margin: var(--space-lg) 0 0;
  color: var(--color-text-secondary);
  font-size: 16px;
}

.graftivo-designer-approval-status.is-error {
  color: var(--color-secondary-hover);
}

.graftivo-designer-approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.graftivo-designer-approval-actions button {
  min-height: 48px;
  padding: 10px var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.graftivo-designer-approval-cancel {
  background: var(--color-bg-base);
  color: var(--color-primary);
}

.graftivo-designer-approval-submit {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-approval-submit:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.graftivo-designer-approval-actions button:focus-visible,
.graftivo-designer-approval-check input:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .graftivo-designer-approval {
    width: calc(100vw - (var(--space-md) * 2));
  }

  .graftivo-designer-approval-actions {
    flex-direction: column-reverse;
  }

  .graftivo-designer-approval-actions button {
    width: 100%;
  }

  .graftivo-designer-proof-head {
    display: grid;
  }
}

/* ==========================================================================
   Graftivo Designer — full-screen production workspace (v1.7.0)
   ========================================================================== */

html:has(.graftivo-designer-body) {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.graftivo-designer-body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-family-body);
}

.graftivo-designer-body *,
.graftivo-designer-body *::before,
.graftivo-designer-body *::after {
  box-sizing: border-box;
}

#graftivo-designer-app {
  --graftivo-designer-sidebar-width: 362px;
  --graftivo-designer-contextbar-height: 56px;
  display: grid;
  width: 100vw;
  height: 100dvh;
  grid-template-rows: 68px minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.graftivo-designer-topbar {
  position: relative;
  z-index: 80;
  display: grid;
  min-width: 0;
  grid-template-columns: 308px auto minmax(180px, 1fr) auto auto;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--color-bg-base) 14%, transparent);
  background: var(--color-primary);
  color: var(--color-bg-base);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.graftivo-designer-contextbar {
  position: absolute;
  z-index: 70;
  top: 68px;
  right: 0;
  left: var(--graftivo-designer-sidebar-width);
  display: flex;
  min-height: var(--graftivo-designer-contextbar-height);
  padding: var(--space-sm) var(--space-lg);
  align-items: center;
  gap: var(--space-sm);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.graftivo-designer-contextbar[hidden] { display: none; }
.graftivo-designer-contextbar-label { color: var(--color-primary); font-family: var(--font-family-headings); font-weight: 700; }
.graftivo-designer-contextbar label { display: grid; gap: 2px; color: var(--color-text-secondary); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.graftivo-designer-contextbar select, .graftivo-designer-contextbar input { min-height: 30px; font-size: 16px; }
.graftivo-designer-contextbar button { display: grid; min-width: 42px; min-height: 38px; place-items: center; border: 1px solid var(--color-border); background: var(--color-bg-base); color: var(--color-primary); cursor: pointer; }
.graftivo-designer-contextbar button small { font-size: 9px; }

/* Text creation belongs in the rail; selected-text editing belongs in the contextual bar. */
#graftivo-gd-panel-text-body .graftivo-gd-field,
#graftivo-gd-panel-text-body .graftivo-gd-field-row,
#graftivo-gd-panel-text-body .graftivo-gd-control-group { display: none; }

.graftivo-designer-brand {
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-lg);
  border-right: 1px solid color-mix(in srgb, var(--color-bg-base) 14%, transparent);
  color: var(--color-bg-base);
  text-decoration: none;
}

.graftivo-designer-brand-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-bg-base) 28%, transparent);
  border-radius: 50%;
  font-size: 18px;
  transition: border-color .2s ease, transform .2s ease;
}

.graftivo-designer-brand:hover .graftivo-designer-brand-arrow,
.graftivo-designer-brand:focus-visible .graftivo-designer-brand-arrow {
  border-color: var(--color-highlight);
  transform: translateX(-2px);
}

.graftivo-designer-wordmark {
  display: grid;
  line-height: 1;
}

.graftivo-designer-wordmark strong {
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
}

.graftivo-designer-wordmark small {
  margin-top: 5px;
  color: var(--color-highlight);
  font-family: var(--font-family-headings);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .22em;
}

.graftivo-designer-history {
  display: flex;
  height: 100%;
  align-items: stretch;
  padding: 0 var(--space-sm);
}

.graftivo-designer-history button {
  display: grid;
  min-width: 56px;
  padding: 8px 10px;
  place-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--color-bg-base);
  font-family: var(--font-family-body);
  cursor: pointer;
}

.graftivo-designer-history button span {
  font-size: 21px;
  line-height: 1;
}

.graftivo-designer-history button small {
  font-size: 9px;
  letter-spacing: .04em;
}

.graftivo-designer-history button:hover:not(:disabled),
.graftivo-designer-history button:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--color-bg-base) 10%, transparent);
}

.graftivo-designer-history button:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.graftivo-designer-document {
  min-width: 0;
  padding: 0 var(--space-md);
  text-align: center;
}

.graftivo-designer-document .graftivo-gd-title {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--color-bg-base);
  font-family: var(--font-family-headings);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-designer-document-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: color-mix(in srgb, var(--color-bg-base) 68%, transparent);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graftivo-designer-document-status::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-highlight);
  content: '';
}

.graftivo-designer-product-option {
  padding-right: var(--space-md);
}

.graftivo-designer-product-option:empty {
  display: none;
}

.graftivo-designer-product-option select {
  width: min(210px, 22vw);
  min-height: 40px;
  padding: 8px 34px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--color-bg-base) 28%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-primary) 80%, var(--color-bg-base));
  color: var(--color-bg-base);
  font-size: 16px;
}

.graftivo-gd-primary-btn {
  display: inline-flex;
  min-height: 44px;
  margin-right: 12px;
  padding: 10px 20px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--color-bg-base);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.graftivo-gd-primary-btn:hover,
.graftivo-gd-primary-btn:focus-visible {
  border-color: var(--color-highlight);
  background: var(--color-highlight);
  color: var(--color-primary);
}

.graftivo-gd-primary-btn:disabled {
  cursor: wait;
  opacity: .65;
}

.graftivo-designer-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 82px 280px minmax(0, 1fr);
  overflow: hidden;
}

.graftivo-designer-tool-rail {
  position: relative;
  z-index: 40;
  display: grid;
  min-height: 0;
  align-content: start;
  border-right: 1px solid var(--color-border);
  background: var(--color-primary);
  overflow-y: auto;
  scrollbar-width: none;
}

.graftivo-designer-tool-rail::-webkit-scrollbar {
  display: none;
}

.graftivo-designer-tool-tab {
  display: grid;
  min-width: 0;
  min-height: 78px;
  padding: 10px 5px;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--color-bg-base) 74%, transparent);
  font-family: var(--font-family-body);
  font-size: 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.graftivo-designer-tool-icon {
  font-family: var(--font-family-headings);
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
}

.graftivo-designer-tool-tab:hover,
.graftivo-designer-tool-tab:focus-visible,
.graftivo-designer-tool-tab.is-active {
  border-left-color: var(--color-highlight);
  background: color-mix(in srgb, var(--color-bg-base) 10%, transparent);
  color: var(--color-bg-base);
}

.graftivo-designer-context {
  position: relative;
  z-index: 35;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 12px 0 30px color-mix(in srgb, var(--color-primary) 7%, transparent);
}

.graftivo-designer-context-head {
  display: flex;
  min-height: 82px;
  padding: 18px var(--space-lg);
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}

.graftivo-designer-context-head span {
  color: var(--color-tertiary);
  font-family: var(--font-family-headings);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
}

.graftivo-designer-context-head h2 {
  margin: 4px 0 0;
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 22px;
  letter-spacing: -.025em;
}

.graftivo-designer-context-head button {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-base);
  color: var(--color-primary);
  font-size: 24px;
  cursor: pointer;
}

.graftivo-designer-context-scroll {
  min-height: 0;
  padding: var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.graftivo-designer-panel-section[hidden] {
  display: none;
}

.graftivo-gd-panel-intro {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.graftivo-gd-panel-primary,
.graftivo-gd-tool-btn,
.graftivo-gd-danger-btn {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  padding: 10px var(--space-md);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.graftivo-gd-panel-primary {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-gd-tool-btn {
  background: var(--color-bg-base);
  color: var(--color-primary);
}

.graftivo-gd-danger-btn {
  border-color: var(--color-secondary-hover);
  background: var(--color-bg-base);
  color: var(--color-secondary-hover);
}

.graftivo-gd-panel-primary:hover,
.graftivo-gd-panel-primary:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-tertiary);
}

.graftivo-gd-field,
.graftivo-gd-field-row {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-field {
  margin-top: var(--space-lg);
}

.graftivo-gd-field-row {
  grid-template-columns: 1fr 1fr;
}

.graftivo-gd-field label {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graftivo-gd-field input,
.graftivo-gd-field select {
  width: 100%;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-gd-field input[type='color'] {
  padding: 5px;
}

.graftivo-gd-empty-state {
  display: grid;
  min-width: 0;
  padding: var(--space-xl) var(--space-md);
  place-items: center;
  gap: var(--space-sm);
  border: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
  text-align: center;
}

.graftivo-gd-empty-state strong {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 14px;
}

.graftivo-gd-empty-state span {
  font-size: 12px;
  line-height: 1.5;
}

.graftivo-gd-object-tools {
  display: grid;
  gap: var(--space-lg);
}

.graftivo-gd-object-tools[hidden],
.graftivo-gd-empty-state[hidden],
.graftivo-gd-layer-actions[hidden],
.graftivo-designer-warning[hidden] {
  display: none;
}

.graftivo-gd-object-tools strong {
  font-family: var(--font-family-headings);
  font-size: 15px;
}

.graftivo-gd-layer-actions {
  display: grid;
  margin-bottom: var(--space-md);
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.graftivo-gd-layer-actions .graftivo-gd-tool-btn {
  min-height: 42px;
  padding: 8px;
  font-size: 12px;
}

.graftivo-gd-layer-list {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-layer-item {
  display: grid;
  min-height: 48px;
  padding: 8px 10px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.graftivo-gd-layer-item > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-family-headings);
}

.graftivo-gd-layer-item strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-gd-layer-item small {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.graftivo-gd-layer-item.is-selected {
  border-color: var(--color-tertiary);
  box-shadow: inset 3px 0 0 var(--color-tertiary);
}

.graftivo-gd-control-group,
.graftivo-gd-shape-library {
  display: grid;
  margin-top: var(--space-lg);
  gap: var(--space-sm);
}

.graftivo-gd-shape-library {
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.graftivo-gd-control-label {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graftivo-gd-segmented,
.graftivo-gd-object-actions,
.graftivo-gd-shape-grid {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-segmented {
  grid-template-columns: repeat(3, 1fr);
}

.graftivo-gd-object-actions {
  grid-template-columns: 1fr 1fr;
}

.graftivo-gd-shape-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.graftivo-gd-segmented button,
.graftivo-gd-shape-grid button {
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  cursor: pointer;
}

.graftivo-gd-segmented button:hover,
.graftivo-gd-segmented button:focus-visible,
.graftivo-gd-segmented button.is-active,
.graftivo-gd-shape-grid button:hover,
.graftivo-gd-shape-grid button:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-bg-alt);
}

.graftivo-gd-segmented button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.graftivo-gd-shape-grid button {
  display: grid;
  min-width: 0;
  place-items: center;
  gap: var(--space-xs);
  font-size: 10px;
}

.graftivo-gd-shape-grid button span {
  font-size: 24px;
  line-height: 1;
}

.graftivo-gd-layer-row {
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
}

.graftivo-gd-layer-row.is-selected {
  border-color: var(--color-tertiary);
  box-shadow: inset 3px 0 0 var(--color-tertiary);
}

.graftivo-gd-layer-select,
.graftivo-gd-layer-toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.graftivo-gd-layer-select {
  min-width: 0;
  padding: 10px 12px;
  overflow: hidden;
  text-align: left;
}

.graftivo-gd-layer-select strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-gd-layer-toggle {
  min-width: 48px;
  padding: 6px;
  border-left: 1px solid var(--color-border);
  font-size: 10px;
}

.graftivo-gd-layer-select:hover,
.graftivo-gd-layer-select:focus-visible,
.graftivo-gd-layer-toggle:hover,
.graftivo-gd-layer-toggle:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-secondary);
}

.graftivo-gd-load-more {
  width: 100%;
  margin-top: var(--space-md);
}

.graftivo-gd-load-more[hidden] {
  display: none;
}

.graftivo-gd-panel-grid,
.graftivo-gd-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.graftivo-gd-panel-grid .graftivo-gd-empty-state,
.graftivo-gd-template-grid .graftivo-gd-empty-state {
  grid-column: 1 / -1;
}

.graftivo-gd-graphic-item,
.graftivo-gd-template-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  cursor: pointer;
}

.graftivo-gd-graphic-item:hover,
.graftivo-gd-graphic-item:focus-visible,
.graftivo-gd-template-card:hover,
.graftivo-gd-template-card:focus-visible {
  border-color: var(--color-tertiary);
}

.graftivo-gd-graphic-item img,
.graftivo-gd-template-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.graftivo-gd-template-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  text-align: left;
}

.graftivo-gd-template-card strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graftivo-gd-source-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.graftivo-gd-source-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
  text-align: left;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-primary);
  cursor: pointer;
}

.graftivo-gd-source-card:hover,
.graftivo-gd-source-card:focus-visible {
  border-color: var(--color-tertiary);
}

.graftivo-gd-source-card strong {
  font-size: 14px;
}

.graftivo-gd-source-card span {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.graftivo-gd-source-back {
  margin-bottom: var(--space-sm);
}

.graftivo-gd-icon-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.graftivo-gd-icon-item img {
  padding: var(--space-sm);
}

.graftivo-gd-template-card.is-blank {
  min-height: 124px;
  place-content: center;
  place-items: center;
  border-style: dashed;
  text-align: center;
}

.graftivo-gd-template-card.is-blank span {
  font-size: 30px;
  font-weight: 300;
}

.graftivo-gd-upload-drop {
  display: grid;
  padding: var(--space-xl) var(--space-lg);
  place-items: center;
  gap: var(--space-sm);
  border: 1px dashed var(--color-border);
  text-align: center;
}

.graftivo-gd-upload-drop > span {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
  place-items: center;
  border: 1px solid var(--color-tertiary);
  border-radius: 50%;
  color: var(--color-tertiary);
  font-size: 24px;
}

.graftivo-gd-upload-drop strong {
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 15px;
}

.graftivo-gd-upload-drop small,
.graftivo-gd-upload-drop p {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.graftivo-gd-upload-drop .graftivo-gd-panel-primary {
  margin-top: var(--space-md);
}

.graftivo-gd-svg-import,
.graftivo-gd-stock-photos {
  display: grid;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.graftivo-gd-svg-import .graftivo-gd-field {
  margin-top: 0;
}

.graftivo-gd-svg-import p,
.graftivo-gd-stock-photos > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.graftivo-gd-stock-photos h3 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 16px;
}

.graftivo-gd-stock-search {
  display: grid;
  gap: var(--space-sm);
}

.graftivo-gd-stock-search input {
  width: 100%;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-gd-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
}

.graftivo-gd-stock-card {
  min-width: 0;
  margin: 0;
}

.graftivo-gd-stock-image {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-alt);
  cursor: pointer;
}

.graftivo-gd-stock-image:hover,
.graftivo-gd-stock-image:focus-visible {
  border-color: var(--color-tertiary);
}

.graftivo-gd-stock-image:disabled {
  cursor: wait;
  opacity: .6;
}

.graftivo-gd-stock-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.graftivo-gd-stock-card p {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.graftivo-gd-stock-card a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.graftivo-gd-stock-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  font-size: 11px;
}

.graftivo-gd-stock-pagination[hidden] {
  display: none;
}

.graftivo-gd-stock-pagination .graftivo-gd-tool-btn {
  min-height: 38px;
  padding: 6px;
  font-size: 11px;
}

.graftivo-designer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px),
    var(--color-bg-alt);
  background-size: 24px 24px;
}

.graftivo-designer-canvas-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 40px 56px 74px;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
}

#graftivo-gd-canvas-holder {
  flex: 0 0 auto;
  line-height: 0;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.graftivo-designer-stage .canvas-container {
  background: var(--color-bg-base);
}

/* Bleed/trim guides: plain DOM overlays (not canvas strokes) inside .canvas-container,
   positioned in JS (editor.js addGuides()). A canvas stroke rides the same zoom
   transform as everything else on the canvas, so under fractional zoom its
   antialiasing lands on a different sub-pixel per edge — two sides render crisp,
   two render blurry, with no relation to the configured strokeWidth. A CSS border
   is resolved by the browser's own box model, not the canvas, so it is always
   identical on all 4 sides regardless of zoom. */
.graftivo-gd-guide {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

.graftivo-gd-guide-bleed {
  border: 1.5px solid var(--graftivo-gd-guide-bleed);
}

.graftivo-gd-guide-trim {
  border: 2px dashed var(--graftivo-gd-guide-trim);
}

/* Fijo abajo del stage, lejos de la contextbar (que vive arriba) — así el
   canvas nunca necesita moverse cuando la contextbar aparece/desaparece. */
.graftivo-designer-tabs {
  position: absolute;
  z-index: 20;
  bottom: 14px;
  left: 50%;
  display: flex;
  max-width: calc(100% - 32px);
  padding: 3px;
  gap: 2px;
  transform: translateX(-50%);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-base) 78%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 6%, transparent);
  overflow-x: auto;
  opacity: .88;
  transition: opacity .15s ease;
}

.graftivo-designer-tabs:hover,
.graftivo-designer-tabs:focus-within {
  opacity: 1;
}

.graftivo-designer-tabs button {
  min-height: 26px;
  padding: 4px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-family-headings);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.graftivo-designer-tabs button.is-active {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-warning {
  position: absolute;
  z-index: 25;
  right: 18px;
  bottom: 18px;
  max-width: 280px;
  padding: 10px 14px;
  border-left: 3px solid var(--color-highlight);
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-size: 12px;
}

.graftivo-designer-embroidery-guidance {
  position: absolute;
  z-index: 24;
  top: 56px;
  right: 18px;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tertiary);
  background: var(--color-bg-base);
  color: var(--color-text-secondary);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-size: 12px;
}

.graftivo-designer-embroidery-guidance p { margin: 0 0 var(--space-sm); }
.graftivo-designer-embroidery-guidance strong { color: var(--color-primary); }
.graftivo-designer-embroidery-color-warning,
.graftivo-designer-embroidery-image-warning { color: var(--color-primary); font-weight: 700; }
.graftivo-designer-embroidery-guidance [hidden] { display: none; }

@media (max-width: 782px) {
  .graftivo-designer-embroidery-guidance {
    position: relative;
    top: auto;
    right: auto;
    max-width: none;
    margin: var(--space-sm) var(--space-md) 0;
  }
}

.graftivo-designer-mobile-tools,
.graftivo-designer-viewport-notice {
  display: none;
}

.graftivo-designer-error {
  align-self: center;
  margin: auto;
  padding: var(--space-2xl);
  color: var(--color-text);
  font-size: 16px;
  text-align: center;
}

.graftivo-designer-body button:focus-visible,
.graftivo-designer-body a:focus-visible,
.graftivo-designer-body input:focus-visible,
.graftivo-designer-body select:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  #graftivo-designer-app {
    --graftivo-designer-sidebar-width: 324px;
  }

  .graftivo-designer-topbar {
    grid-template-columns: 256px auto minmax(140px, 1fr) auto auto;
  }

  .graftivo-designer-workspace {
    grid-template-columns: 74px 250px minmax(0, 1fr);
  }

  .graftivo-designer-brand {
    padding-inline: var(--space-md);
  }
}

@media (max-width: 880px) {
  #graftivo-designer-app {
    --graftivo-designer-sidebar-width: 0px;
  }

  #graftivo-designer-app {
    grid-template-rows: 60px minmax(0, 1fr) 70px;
  }

  .graftivo-designer-topbar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .graftivo-designer-brand {
    width: 54px;
    padding: 0 10px;
    border-right: 0;
  }

  .graftivo-designer-brand-arrow {
    width: 34px;
    height: 34px;
  }

  .graftivo-designer-wordmark {
    display: none;
  }

  .graftivo-designer-history {
    padding: 0;
  }

  .graftivo-designer-history button {
    min-width: 40px;
    padding: 6px;
  }

  .graftivo-designer-history button small,
  .graftivo-designer-document-status {
    display: none;
  }

  .graftivo-designer-document {
    padding: 0 8px;
    text-align: left;
  }

  .graftivo-designer-document .graftivo-gd-title {
    font-size: 12px;
  }

  .graftivo-designer-product-option {
    position: absolute;
    z-index: 30;
    top: 72px;
    right: 12px;
    padding: 0;
  }

  .graftivo-designer-product-option select {
    width: min(180px, 48vw);
    border-color: var(--color-border);
    background: var(--color-bg-base);
    color: var(--color-primary);
  }

  .graftivo-gd-primary-btn {
    width: 48px;
    min-width: 48px;
    margin-right: 6px;
    padding: 8px;
    gap: 0;
    font-size: 0;
  }

  .graftivo-gd-primary-btn span {
    font-size: 19px;
  }

  .graftivo-designer-workspace {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }

  .graftivo-designer-tool-rail {
    display: none;
  }

  .graftivo-designer-context {
    position: fixed;
    z-index: 70;
    right: 0;
    bottom: 70px;
    left: 0;
    display: grid;
    width: 100%;
    max-height: min(62dvh, 520px);
    transform: translateY(calc(100% + 80px));
    border-top: 1px solid var(--color-border);
    border-right: 0;
    box-shadow: 0 -22px 56px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transition: transform .28s ease;
  }

  .graftivo-designer-context.is-open {
    transform: translateY(0);
  }

  .graftivo-designer-context-head {
    min-height: 70px;
    padding: 14px var(--space-lg);
  }

  .graftivo-designer-context-head button {
    display: grid;
    place-items: center;
  }

  .graftivo-designer-context-scroll {
    padding: var(--space-lg);
  }

  .graftivo-designer-stage {
    grid-column: 1;
  }

  .graftivo-designer-canvas-viewport {
    padding: 70px 18px 36px;
  }

  /* En móvil no hay espacio abajo (mobile-tools ocupa esa franja): vuelve
     arriba, pero más chico y discreto que antes para no competir con el diseño. */
  .graftivo-designer-tabs {
    top: 10px;
    bottom: auto;
    padding: 2px;
    max-width: calc(100% - 24px);
  }

  .graftivo-designer-tabs button {
    min-height: 24px;
    padding: 3px 9px;
    font-size: 10px;
  }

  .graftivo-designer-warning {
    right: 10px;
    bottom: 10px;
    left: 10px;
    max-width: none;
  }

  .graftivo-designer-mobile-tools {
    position: relative;
    z-index: 75;
    display: grid;
    grid-row: 3;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid color-mix(in srgb, var(--color-bg-base) 14%, transparent);
    background: var(--color-primary);
    overflow-x: auto;
  }

  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab {
    min-height: 70px;
    padding: 7px 2px;
    border-top: 3px solid transparent;
    border-left: 0;
    font-size: 8px;
  }

  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab.is-active,
  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab:hover,
  .graftivo-designer-mobile-tools .graftivo-designer-tool-tab:focus-visible {
    border-top-color: var(--color-highlight);
    border-left-color: transparent;
  }

  .graftivo-designer-mobile-tools .graftivo-designer-tool-icon {
    font-size: 19px;
  }
}

@media (max-width: 420px) {
  .graftivo-designer-history button {
    min-width: 36px;
  }

  .graftivo-designer-document .graftivo-gd-title {
    font-size: 11px;
  }

  .graftivo-gd-panel-grid,
  .graftivo-gd-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-height: 480px) {
  .graftivo-designer-topbar,
  .graftivo-designer-workspace,
  .graftivo-designer-mobile-tools {
    display: none;
  }

  #graftivo-designer-app {
    display: grid;
    grid-template-rows: 1fr;
  }

  .graftivo-designer-viewport-notice {
    display: grid;
    max-width: 420px;
    margin: auto;
    padding: var(--space-xl);
    place-items: center;
    gap: var(--space-md);
    color: var(--color-text-secondary);
    text-align: center;
  }

  .graftivo-designer-viewport-notice strong {
    color: var(--color-primary);
    font-family: var(--font-family-headings);
    font-size: 24px;
  }

  .graftivo-designer-viewport-notice a {
    color: var(--color-secondary);
    font-size: 16px;
    font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graftivo-designer-context,
  .graftivo-designer-brand-arrow,
  .graftivo-gd-primary-btn {
    transition: none;
  }
}

/* Modal on product pages, centered fallback on direct URLs. */
html.graftivo-designer-dialog-open {
  overflow: hidden;
}

/* Selector ligero para productos variables: una opción WooCommerce antes del flujo de diseño. */
/* Shared by every place this option form renders (plain dimensions-only product,
   variable product with color/dropdown/list swatches, or both combined): the
   options themselves (colors, sizes, dimensions) get their own full-width row,
   Quantity + the action button share a second row. A 3-column single-row layout
   (options | quantity | button) used to squeeze column 1 down to a sliver,
   because the button's status text ("Selection ready. The final price will be
   verified...") drove the "auto" action column far wider than the button itself
   needs, stealing space no matter how the remaining two columns were sized. */
.graftivo-designer-product-options {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: end;
  gap: 12px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.graftivo-designer-product-options > .graftivo-designer-swatch-groups,
.graftivo-designer-product-options > .graftivo-designer-swatch-group,
.graftivo-designer-product-options > .graftivo-designer-dimensions-group,
.graftivo-designer-product-options > .graftivo-designer-extras-group {
  grid-column: 1 / -1;
}

.graftivo-designer-product-options label {
  display: grid;
  gap: 6px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.graftivo-designer-product-options select,
.graftivo-designer-product-options input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-designer-product-options .graftivo-designer-customize {
  min-height: 44px;
  margin: 0;
  white-space: nowrap;
}


.graftivo-designer-swatch-groups {
  display: grid;
  gap: 14px;
}

.graftivo-designer-swatch-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.graftivo-designer-swatch-group legend {
  margin-bottom: 7px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.graftivo-designer-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.graftivo-designer-option-dropdown {
  width: min(100%, 320px);
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: var(--color-bg-base);
  color: var(--color-text);
  font: 600 16px/1.2 var(--font-family-body);
}

.graftivo-designer-option-dropdown:focus-visible {
  border-color: var(--color-primary);
}

.graftivo-designer-dimensions-group {
  display: grid;
  gap: 8px;
}

.graftivo-designer-dimensions-fields {
  display: flex;
  align-items: end;
  gap: 10px;
}

.graftivo-designer-dimensions-fields > label {
  /* Blocksy's base form styles put margin-bottom on every non-last label (for
     stacked layouts); here the two labels sit side by side, so it only shows up
     on the first one (Width) and throws off the align-items:end baseline. */
  margin: 0;
  flex: 1 1 130px;
}

.graftivo-designer-dimension-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
}

.graftivo-designer-dimension-input input {
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px 8px 12px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 16px;
}

.graftivo-designer-dimension-input small {
  padding: 0 12px 0 7px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.graftivo-designer-dimensions-times {
  padding-bottom: 12px;
  color: var(--color-text-secondary);
  font-weight: 800;
}

.graftivo-designer-dimensions-estimate {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
}

.graftivo-designer-dimensions-estimate strong {
  color: var(--color-primary);
}

.graftivo-designer-dimensions-estimate small {
  flex-basis: 100%;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.graftivo-designer-extras-group {
  display: grid;
  gap: 14px;
}

.graftivo-designer-personalization-set {
  display: grid;
  gap: 8px;
}

.graftivo-designer-personalization-label {
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 800;
}

.graftivo-designer-extras-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.graftivo-designer-product-options .graftivo-designer-extra-option {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  cursor: pointer;
}

.graftivo-designer-product-options .graftivo-designer-extra-option:has(input:checked) {
  border-color: var(--color-secondary);
  box-shadow: inset 3px 0 0 var(--color-secondary);
}

.graftivo-designer-product-options .graftivo-designer-extra-option input {
  width: 20px;
  min-height: 20px;
  flex: 0 0 20px;
  accent-color: var(--color-secondary);
}

.graftivo-designer-extra-option > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.graftivo-designer-extra-option small {
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.graftivo-designer-extras-estimate {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
}

.graftivo-designer-extras-estimate strong { color: var(--color-primary); }
.graftivo-designer-extras-estimate small { flex-basis: 100%; color: var(--color-text-secondary); font-size: 11px; }

.graftivo-designer-swatch {
  display: inline-flex;
  min-height: 38px;
  padding: 7px 10px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-base);
  color: var(--color-text);
  font: 700 14px/1 var(--font-family-body);
  cursor: pointer;
}

.graftivo-designer-swatch:hover:not(:disabled),
.graftivo-designer-swatch:focus-visible,
.graftivo-designer-swatch.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-swatch:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.graftivo-designer-swatch--color > span:first-child {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1px solid color-mix(in srgb, var(--color-text) 32%, transparent);
  border-radius: 50%;
  background: var(--graftivo-swatch-color, var(--color-bg-alt));
}

.graftivo-designer-quantity {
  align-self: end;
}

.graftivo-designer-product-options-action {
  display: grid;
  align-self: end;
  gap: 5px;
}

.graftivo-designer-product-options-action p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 689px) {
  .graftivo-designer-product-options {
    grid-template-columns: 1fr 92px;
  }

  .graftivo-designer-swatch-options {
    grid-template-columns: 1fr 92px;
  }

  .graftivo-designer-product-options .graftivo-designer-customize,
  .graftivo-designer-product-options-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .graftivo-designer-dimensions-fields {
    flex-wrap: wrap;
  }
}

.graftivo-designer-choice-dialog {
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.graftivo-designer-choice-dialog::backdrop {
  background: var(--color-bg-alt);
}

.graftivo-designer-choice-shell {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.graftivo-designer-choice-dialog-inner {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100dvh;
  padding: clamp(72px, 10vh, 120px) clamp(24px, 5vw, 72px);
  place-items: center;
  overflow-y: auto;
  background: var(--color-bg-alt);
  overscroll-behavior: contain;
}

.graftivo-designer-choice-dialog-inner .graftivo-designer-choice-form {
  width: min(960px, 100%);
}

.graftivo-designer-choice-close {
  position: fixed;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font: 400 28px/1 var(--font-family-body);
  cursor: pointer;
}

.graftivo-designer-choice-close:hover,
.graftivo-designer-choice-close:focus-visible {
  background: var(--color-primary);
  color: var(--color-bg-base);
}

.graftivo-designer-choice-context {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--color-border);
}

.graftivo-designer-choice-form > .graftivo-designer-choice-context .graftivo-designer-swatch-groups {
  width: 100%;
  flex-basis: 100%;
  margin-top: var(--space-sm);
}

.graftivo-designer-choice-variation-summary,
.graftivo-designer-choice-option-status {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.graftivo-designer-choice-variation-summary {
  flex: 1 1 100%;
}

.graftivo-designer-choice-option-status {
  align-self: center;
}

.graftivo-designer-choice-product-copy strong {
  display: block;
  color: var(--color-primary);
  font-family: var(--font-family-headings);
  font-size: 16px;
  line-height: 1.3;
}

.graftivo-designer-choice-context .graftivo-designer-choice-fields select,
.graftivo-designer-choice-context .graftivo-designer-choice-fields input {
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 16px;
}

/* Especificidad suficiente frente a Blocksy; evita auto-zoom iOS. */
.graftivo-designer-choice-form .graftivo-designer-choice-fields input,
.graftivo-designer-choice-form .graftivo-designer-choice-fields select {
  font-size: 16px;
}

.graftivo-designer-choice-context .graftivo-designer-choice-fields input {
  width: 72px;
}

.graftivo-designer-choice-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.graftivo-designer-choice-form .graftivo-designer-choice-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 24px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 18px;
  min-height: 150px;
  padding: 0 24px 0 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  color: var(--color-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.graftivo-designer-choice-form .graftivo-designer-choice-card:hover,
.graftivo-designer-choice-form .graftivo-designer-choice-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-tertiary);
  background: var(--color-bg-base);
  color: var(--color-primary);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.graftivo-designer-choice-form .graftivo-designer-choice-card:disabled {
  transform: none;
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none;
}

.graftivo-designer-choice-card-editor .graftivo-designer-choice-icon {
  background: color-mix(in srgb, var(--color-highlight) 70%, var(--color-bg-base));
}

.graftivo-designer-choice-card-upload .graftivo-designer-choice-icon {
  background: color-mix(in srgb, var(--color-tertiary) 24%, var(--color-bg-base));
}

.graftivo-designer-choice-icon {
  align-self: stretch;
  width: 86px;
  height: auto;
  min-height: 148px;
  margin: 0;
  border: 0;
}

.graftivo-designer-choice-icon svg {
  width: 38px;
  height: 38px;
}

.graftivo-designer-choice-card-copy {
  align-self: center;
}

.graftivo-designer-choice-card-copy strong {
  margin-bottom: 8px;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.graftivo-designer-choice-card-copy small {
  position: relative;
  padding-left: 12px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .76;
}

.graftivo-designer-choice-card-copy small::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: 5px;
  height: 1px;
  background: currentColor;
}

.graftivo-designer-choice-arrow {
  color: var(--color-tertiary);
  font-size: 24px;
  transition: transform .2s ease;
}

.graftivo-designer-choice-card:hover .graftivo-designer-choice-arrow,
.graftivo-designer-choice-card:focus-visible .graftivo-designer-choice-arrow {
  transform: translateX(4px);
}

.graftivo-designer-choice-page {
  display: grid;
  min-height: 72vh;
  place-items: center;
  padding: 48px 24px;
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-alt));
}

.graftivo-designer-choice-page .graftivo-designer-choice-hero {
  width: min(960px, 100%);
  padding: 0;
  overflow: visible;
}

.graftivo-designer-choice-page .graftivo-designer-choice-hero::before {
  display: none;
}

.graftivo-designer-choice-shell .graftivo-designer-choice-back {
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .graftivo-designer-choice-dialog-inner {
    min-height: 100dvh;
    padding: 68px 16px 24px;
  }

  .graftivo-designer-choice-context .graftivo-designer-choice-fields {
    flex-direction: row;
  }

  .graftivo-designer-choice-context .graftivo-designer-choice-fields label {
    width: auto;
  }

  .graftivo-designer-choice-context .graftivo-designer-choice-fields label:first-child {
    flex: 1;
  }

  .graftivo-designer-choice-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .graftivo-designer-choice-form .graftivo-designer-choice-card {
    grid-template-columns: 68px minmax(0, 1fr) 20px;
    gap: 14px;
    min-height: 116px;
    padding-right: 16px;
  }

  .graftivo-designer-choice-icon {
    width: 68px;
    min-height: 114px;
  }

  .graftivo-designer-choice-card-copy strong {
    font-size: 17px;
  }

  .graftivo-designer-choice-card-copy small {
    font-size: 12px;
  }
}

/* ==========================================================================
   Base Structure & Layouts
   ========================================================================== */

.graftivo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Base subtle grid background lines (GitHub Style) */
.graftivo-bg-grid {
  background-size: 48px 48px;
  background-image: 
    linear-gradient(to right, rgba(228, 228, 231, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(228, 228, 231, 0.15) 1px, transparent 1px);
  position: relative;
}

/* Thin upper/lower border separating blocks */
.graftivo-bg-grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 1px;
  background: var(--color-border);
}

.graftivo-bg-grid::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 1px;
  background: var(--color-border);
}

/* Moving/Spotlight illuminated overlay grid lines (Now containing subtle vertical grid waves) */
.graftivo-grid-glow {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1; /* Colocado en el fondo detrás de las letras */
  overflow: hidden;
  
  /* Strictly mask the container so waves illuminate ONLY the 1.2px grid lines themselves */
  mask-image: 
    linear-gradient(to right, black 1.2px, transparent 1.2px),
    linear-gradient(to bottom, black 1.2px, transparent 1.2px);
  mask-size: 48px 48px;
  mask-repeat: repeat;
  
  -webkit-mask-image: 
    linear-gradient(to right, black 1.2px, transparent 1.2px),
    linear-gradient(to bottom, black 1.2px, transparent 1.2px);
  -webkit-mask-size: 48px 48px;
  -webkit-mask-repeat: repeat;
}

/* --- SUBTLE VERTICAL GRID WAVE ANIMATION --- */
.grid-wave {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 380px;
  pointer-events: none;
  opacity: 0;
  
  /* Mixed Aurora Gradient: Teal, Blue, and Yellow swirling natively */
  background-image: 
    radial-gradient(circle at 30% 40%, rgba(47, 143, 131, 0.45) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(26, 115, 232, 0.45) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255, 204, 0, 0.35) 0%, transparent 50%);
  
  /* Seamless fade at left and right edges to prevent hard linear cuts */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
  
  animation: sweepWaveSlow 28s infinite linear;
}

/* Staggered Waves: one after another with absolute quiet pauses */
.wave-first {
  animation-delay: 0s;
}

.wave-second {
  animation-delay: 14s;
}

/* Majestic slow movement: 10 seconds of diagonal horizontal glide + 18 seconds of absolute quiet */
@keyframes sweepWaveSlow {
  0% {
    left: -400px;
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  35.7% {
    left: 100%;
    opacity: 0;
  }
  35.701%, 100% {
    left: 100%;
    opacity: 0;
  }
}

/* ==========================================================================
   SECTION 1: HERO
   ========================================================================== */

.graftivo-hero {
  padding: 120px 0;
  background-color: var(--color-bg-base);
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.graftivo-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}

.graftivo-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 3; /* Traer el texto al frente, por encima de las ondas y cuadrícula */
}

.graftivo-badge {
  background-color: rgba(47, 143, 131, 0.08);
  border: 1px solid rgba(47, 143, 131, 0.2);
  color: var(--color-tertiary);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.graftivo-hero-title {
  font-family: var(--font-family-headings);
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-primary);
  letter-spacing: -0.025em;
  margin: 0 0 20px 0;
}

.graftivo-hero-description {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 36px 0;
  max-width: 540px;
}

.graftivo-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Premium Buttons */
.graftivo-btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-bg-base) !important;
  font-family: var(--font-family-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  padding: 12px 28px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.graftivo-btn-primary:hover {
  background-color: var(--color-secondary-hover);
  box-shadow: 0 0 16px rgba(26, 115, 232, 0.3);
  transform: translateY(-1px);
}

.graftivo-btn-secondary {
  background-color: var(--color-bg-base);
  color: var(--color-primary) !important;
  font-family: var(--font-family-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  padding: 12px 28px;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.graftivo-btn-secondary:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-bg-alt);
  transform: translateY(-1px);
}

/* --- Magic Minimalist Button --- */
.graftivo-btn-magic {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: var(--color-tertiary) !important;
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid rgba(47, 143, 131, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  text-decoration: none;
  z-index: 1;
}

.graftivo-btn-magic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-tertiary);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-btn-magic:hover {
  color: var(--color-bg-base) !important;
  border-color: var(--color-tertiary);
  box-shadow: 0 10px 20px rgba(47, 143, 131, 0.2);
}

.graftivo-btn-magic:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.graftivo-btn-magic .btn-arrow {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-btn-magic:hover .btn-arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   Hero Visual Split Illustration & Floating Shadow
   ========================================================================== */

.graftivo-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}

.graftivo-split-illustration-container {
  position: relative;
  width: 440px;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 48px rgba(27, 45, 92, 0.06);
  background: var(--color-bg-base);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatIllustration 5s infinite ease-in-out;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.graftivo-split-illustration-container:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 30px 60px rgba(27, 45, 92, 0.1);
  border-color: var(--color-tertiary);
}

.graftivo-split-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes floatIllustration {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ==========================================================================
   Common Section Headers
   ========================================================================== */

.graftivo-section-border {
  border-top: 1px solid var(--color-border);
}

.graftivo-section-header {
  text-align: center;
  margin-bottom: 60px;
  padding-top: 80px;
}

.graftivo-section-tag {
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

.graftivo-section-title {
  font-family: var(--font-family-headings);
  font-size: 38px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
}

.graftivo-section-subtitle {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ==========================================================================
   SECTION 2: FEATURES GRID
   ========================================================================== */

.graftivo-features {
  padding-bottom: 100px;
  background-color: var(--color-bg-base);
}

.graftivo-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.graftivo-feature-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 32px 24px;
  box-shadow: 0 1px 2px rgba(27, 45, 92, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.graftivo-feature-card:hover {
  border-color: var(--color-tertiary);
  box-shadow: 0 10px 30px rgba(47, 143, 131, 0.06);
  transform: translateY(-2px);
}

.graftivo-feature-icon {
  color: var(--color-tertiary);
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
}

.graftivo-feature-title {
  font-family: var(--font-family-headings);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px 0;
}

.graftivo-feature-description {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ==========================================================================
   SECTION 3: CATEGORIES GRID
   ========================================================================== */

.graftivo-categories {
  padding-bottom: 100px;
  background-color: var(--color-bg-alt);
}

.graftivo-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.graftivo-category-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column; /* Vertical card layout (cuadro) */
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 45, 92, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-category-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 16px 40px rgba(27, 45, 92, 0.06);
  transform: translateY(-3px);
}

.graftivo-category-image {
  width: 100%; /* Takes full width of the vertical card */
  height: 240px; /* Fixed height for beautiful desktop layout */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  flex-shrink: 0;
}

.graftivo-category-svg {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Resend-Style Micro-Animations & Infinite Drawing --- */
.graftivo-category-svg path,
.graftivo-category-svg rect,
.graftivo-category-svg circle {
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center;
  /* Infinite Drawing Effect */
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: infiniteBlueprintDraw 3s ease-in-out infinite alternate;
}

@keyframes infiniteBlueprintDraw {
  0% { stroke-dashoffset: 120; }
  100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .graftivo-category-svg path,
  .graftivo-category-svg rect,
  .graftivo-category-svg circle {
    animation: none;
  }
}

/* Base scale for the whole SVG on hover */
.graftivo-category-card:hover .graftivo-category-svg {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

/* 1. Corporate Printing (Card popping up slightly) */
.graftivo-category-card:hover .c-illust-1 .graftivo-category-svg rect {
  transform: scale(1.08);
  stroke-width: 1.5;
}
.graftivo-category-card:hover .c-illust-1 .graftivo-category-svg path {
  transform: translateY(2px);
  stroke: var(--color-tertiary);
}

/* 2. Branding & Logo (Geometry rotation) */
.graftivo-category-card:hover .c-illust-2 .graftivo-category-svg rect {
  transform: rotate(45deg);
  fill: var(--color-primary);
}

/* 3. Marketing Material (Booklet opening) */
.graftivo-category-card:hover .c-illust-3 .graftivo-category-svg path:first-child {
  transform: translateX(-1px) translateY(1px);
}
.graftivo-category-card:hover .c-illust-3 .graftivo-category-svg path:nth-child(2) {
  transform: scale(1.03);
  stroke: var(--color-primary);
}

/* 4. Stickers & Labels (Peeling effect) */
.graftivo-category-card:hover .c-illust-4 .graftivo-category-svg path:nth-child(2) {
  transform: scale(1.35) translate(-2px, 2px);
  fill: rgba(47, 143, 131, 0.2);
}
.graftivo-category-card:hover .c-illust-4 .graftivo-category-svg circle {
  transform: scale(1.2);
  stroke: var(--color-tertiary);
}

.graftivo-category-badge-sale {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-highlight);
  color: var(--color-primary);
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.graftivo-category-illustration {
  width: 100px;
  height: 100px;
  position: relative;
  /* Background square removed as requested */
}

.c-illust-1 {
  /* Infinite float animation */
  animation: floatIllust1 4s ease-in-out infinite;
}

.c-illust-2 {
  /* Infinite slow rotation */
  animation: rotateIllust2 12s linear infinite;
}

.c-illust-3 {
  /* Infinite breathing/scaling */
  animation: breathIllust3 5s ease-in-out infinite;
}

.c-illust-4 {
  /* Infinite wobble */
  animation: wobbleIllust4 6s ease-in-out infinite;
}

/* Base keyframes for containers */
@keyframes floatIllust1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes rotateIllust2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes breathIllust3 {
  0%, 100% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
}
@keyframes wobbleIllust4 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-5px); }
}

.graftivo-category-info {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Stretches the card wrapper uniformly */
}

.graftivo-category-name {
  font-family: var(--font-family-headings);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 8px 0;
}

.graftivo-category-desc {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
}

.graftivo-category-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto; /* Force push the footer to the bottom of the card */
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.graftivo-category-link {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-tertiary);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
}

.graftivo-category-link:hover {
  color: var(--color-secondary);
  transform: translateX(3px); /* Elegant slide-right effect on hover */
}

/* ==========================================================================
   SECTION 4: WORKFLOW
   ========================================================================== */

.graftivo-process {
  padding-bottom: 100px;
  background-color: var(--color-primary);
}

/* --- OVERRIDES FOR DARK BACKGROUND (NAVY) --- */
.graftivo-process .graftivo-section-title {
  color: var(--color-bg-base);
}
.graftivo-process .graftivo-section-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.graftivo-process-steps {
  display: none; /* Hide old block if any remains */
}

/* --- VISUAL ANIMATION PANELS --- */
.visual-panel-box {
  width: 100%;
  height: 280px;
  background: var(--color-bg-base);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 40px rgba(27, 45, 92, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* 1. Specs Panel Animation */
.specs-panel {
  flex-direction: column;
  gap: 12px;
}

.spec-toggle-item {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  padding: 10px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  animation: specFloat 4s infinite ease-in-out;
}

.spec-toggle-item:nth-child(2) { animation-delay: 1s; }
.spec-toggle-item:nth-child(3) { animation-delay: 2s; }

@keyframes specFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.dot-teal { width: 8px; height: 8px; border-radius: 50%; background: var(--color-tertiary); }
.dot-gold { width: 8px; height: 8px; border-radius: 50%; background: var(--color-highlight); }
.dot-blue { width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); }

/* 2. Audit Panel Animation (Laser Scanner) */
.vector-card-preview {
  width: 200px;
  height: 140px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-bg-base);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(47,143,131,0.04);
}

.safe-margin-line {
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 1px solid rgba(26,115,232,0.2);
  border-radius: 4px;
}

.bleed-line-outer {
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px solid rgba(255,69,58,0.2);
  border-radius: 5px;
}

.audit-laser-scanner {
  position: absolute;
  left: 0; width: 100%; height: 2px;
  background: var(--color-secondary);
  box-shadow: 0 0 8px var(--color-secondary);
  animation: laserScan 2.5s infinite ease-in-out;
}

@keyframes laserScan {
  0%, 100% { top: 0%; }
  50% { top: 100%; }
}

/* 3. Mockup Panel Animation (Approval stamp) */
.mockup-proof-card {
  width: 180px;
  height: 120px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-base);
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.01);
  display: flex;
  align-items: center;
  justify-content: center;
}

.approval-stamp {
  font-family: var(--font-family-mono);
  font-size: 14px;
  font-weight: 800;
  color: #34c759;
  border: 2px solid #34c759;
  padding: 6px 12px;
  border-radius: 4px;
  transform: rotate(-12deg);
  letter-spacing: 0.05em;
  animation: stampApprove 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}

@keyframes stampApprove {
  0% { transform: rotate(-12deg) scale(0.9); opacity: 0.8; }
  100% { transform: rotate(-12deg) scale(1.05); opacity: 1; }
}

/* 4. Print Panel Animation (Rotating rollers) */
.cmyk-roller-container {
  display: flex;
  gap: 16px;
}

.roller {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--color-bg-base);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  animation: spinRoller 3s linear infinite;
}

.roller-c { background: #00aeef; }
.roller-m { background: #ec008c; }
.roller-y { background: #fff200; }
.roller-k { background: #231f20; }

@keyframes spinRoller {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 5. Quality & Packaging Panel Animation */
.qc-pack-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qc-box-card {
  width: 140px;
  height: 100px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-base);
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: boxFloat 3s infinite ease-in-out;
}

.qc-seal {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #34c759, var(--color-tertiary));
  border-radius: 50%;
  color: var(--color-bg-base);
  font-family: var(--font-family-mono);
  font-size: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(52,199,89,0.3);
  border: 2px solid var(--color-bg-base);
  transform: rotate(15deg);
  animation: sealPulse 2s infinite ease-in-out;
}

.qc-ribbon {
  width: 100%;
  height: 16px;
  background: var(--color-secondary);
  position: absolute;
  top: 42px;
  left: 0;
  opacity: 0.15;
}

@keyframes boxFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes sealPulse {
  0%, 100% { transform: rotate(15deg) scale(1); }
  50% { transform: rotate(15deg) scale(1.08); }
}

/* --- PREMIUM ANIMATED SHIPPING BOX (STAGE 04) --- */
.ship-animate-container {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shipCycle 6s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base box styles */
.ship-box-wrapper-new {
  position: relative;
  width: 110px;
  height: 110px;
}

/* Isometric shapes styling */
.ship-box-svg-new {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Flaps and lids animations */
.ship-flap-left {
  transform-origin: 50px 65px;
  animation: flapLeftClose 6s infinite ease-in-out;
}

.ship-flap-right {
  transform-origin: 150px 65px;
  animation: flapRightClose 6s infinite ease-in-out;
}

.ship-contents {
  animation: contentsFade 6s infinite ease-in-out;
}

.ship-tape {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: tapeSeal 6s infinite ease-in-out;
}

/* Speed lines */
.ship-speed-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-tertiary), transparent);
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  animation: speedLinesRun 6s infinite linear;
}

.ship-speed-line.l1 { top: 30%; left: -80px; width: 60px; animation-delay: 0.1s; }
.ship-speed-line.l2 { top: 50%; left: -100px; width: 80px; animation-delay: 0s; }
.ship-speed-line.l3 { top: 70%; left: -70px; width: 50px; animation-delay: 0.2s; }

/* --- KEYFRAMES FOR THE SHIPPING PROCESS --- */

/* Left flap closes */
@keyframes flapLeftClose {
  0%, 15% {
    /* Open state - stands up */
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
  25%, 70% {
    /* Closed flat state */
    transform: translateY(25px) rotate(-26.5deg) scaleY(0);
    opacity: 0;
  }
  85%, 100% {
    /* Returns to open */
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
}

/* Right flap closes */
@keyframes flapRightClose {
  0%, 15% {
    /* Open state */
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
  25%, 70% {
    /* Closed flat state */
    transform: translateY(25px) rotate(26.5deg) scaleY(0);
    opacity: 0;
  }
  85%, 100% {
    transform: rotate(0deg) skewY(0deg) scaleY(1);
    opacity: 1;
  }
}

/* Closed Lids fade in when flaps fold */
.ship-lid-left {
  opacity: 0;
  animation: lidLeftShow 6s infinite ease-in-out;
}
.ship-lid-right {
  opacity: 0;
  animation: lidRightShow 6s infinite ease-in-out;
}

@keyframes lidLeftShow {
  0%, 18% { opacity: 0; }
  25%, 70% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes lidRightShow {
  0%, 18% { opacity: 0; }
  25%, 70% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* Contents disappear when closed */
@keyframes contentsFade {
  0%, 15% { opacity: 1; }
  22%, 72% { opacity: 0; }
  82%, 100% { opacity: 1; }
}

/* Tape seal animation */
@keyframes tapeSeal {
  0%, 28% {
    stroke-dashoffset: 60;
  }
  38%, 70% {
    stroke-dashoffset: 0;
  }
  78%, 100% {
    stroke-dashoffset: 60;
  }
}

/* The entire box's physical movement: open, close, seal, rumble, dash, instant return pop-in */
@keyframes shipCycle {
  0% {
    /* Start floating gently at center */
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  15% {
    transform: translate3d(0, -6px, 0) scale(1);
  }
  30% {
    /* Box closed and sealed, float down */
    transform: translate3d(0, 0, 0) scale(1);
  }
  42% {
    /* Rumble/vibrate before shipping */
    transform: translate3d(2px, 0, 0) scale(1.02);
  }
  44% { transform: translate3d(-2px, -1px, 0) scale(1.02); }
  46% { transform: translate3d(2px, 1px, 0) scale(1.02); }
  48% { transform: translate3d(-1px, -2px, 0) scale(1.02); opacity: 1; }
  50% {
    /* DASH FAST TO THE RIGHT! */
    transform: translate3d(280px, 0, 0) scaleX(1.3) scaleY(0.8);
    opacity: 0;
  }
  51%, 80% {
    /* Hold out of view at center (preparing to pop back in) */
    transform: translate3d(0, 0, 0) scale(0.5);
    opacity: 0;
  }
  85% {
    /* Instantly appear back at center as a tiny dot, completely invisible */
    transform: translate3d(0, 0, 0) scale(0.6);
    opacity: 0;
  }
  90% {
    /* Fade and pop in with a slight scale overshoot */
    transform: translate3d(0, 0, 0) scale(1.06);
    opacity: 1;
  }
  94% {
    /* Settle pop-in bounce */
    transform: translate3d(0, -4px, 0) scale(0.98);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

/* Speed lines rushing during the dash */
@keyframes speedLinesRun {
  0%, 42% {
    opacity: 0;
    transform: translateX(0);
  }
  46% {
    opacity: 0.8;
  }
  52% {
    opacity: 0;
    transform: translateX(180px);
  }
  53%, 100% {
    opacity: 0;
  }
}

/* ==========================================================================
   SECTION 5: TESTIMONIALS
   ========================================================================== */

.graftivo-homepage {
  /* overflow: hidden (ambos ejes), NO solo overflow-x: si el eje Y se deja en
     "visible" mientras X está en "hidden", el navegador fuerza Y a "auto" por spec
     (no puede quedar un eje visible si el otro no lo es) — esto convierte a <main>
     en su propio contenedor de scroll vertical anidado, causando doble scrollbar. */
  overflow: hidden;
  width: 100%;
}

.graftivo-testimonials {
  padding-bottom: 100px;
  background-color: var(--color-bg-alt);
}

/* --- TESTIMONIALS SLIDER --- */
.graftivo-testimonials-carousel-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-top: 40px;
  padding: 12px 0; /* Prevents hover translate-y elevation from getting clipped */
  margin-bottom: -12px;
}

.graftivo-testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.graftivo-testimonial-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(27, 45, 92, 0.02);
  flex: 0 0 calc(25% - 18px); /* 4 cards visible on desktop */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.graftivo-testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-tertiary);
  box-shadow: 0 10px 30px rgba(47, 143, 131, 0.05);
}

.graftivo-testimonial-stars {
  color: var(--color-highlight);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.graftivo-testimonial-text {
  font-family: var(--font-family-body);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-primary);
  margin: 0 0 24px 0;
}

.graftivo-testimonial-user {
  display: flex;
  align-items: center;
}

.graftivo-user-info {
  display: flex;
  flex-direction: column;
}

.graftivo-user-name {
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}

.graftivo-user-company {
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-tertiary);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ==========================================================================
   SECTION 6: FAQs ACCORDIONS
   ========================================================================== */

.graftivo-faq {
  padding-bottom: 100px;
  background-color: var(--color-bg-base);
}

.graftivo-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.graftivo-faq-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-base);
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.graftivo-faq-item:hover {
  border-color: var(--color-border-hover);
}

.graftivo-faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

.graftivo-faq-trigger:hover {
  background-color: var(--color-bg-alt);
}

.faq-icon {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-tertiary);
  transition: transform 0.2s ease;
}

.graftivo-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 24px;
}

.graftivo-faq-content p {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  padding-bottom: 20px;
  margin: 0;
}

.faq-active {
  border-color: var(--color-border-hover);
}

.faq-active .graftivo-faq-trigger {
  background-color: var(--color-bg-alt);
}

/* ==========================================================================
   SECTION 7: CTA BANNER
   ========================================================================== */

.graftivo-cta {
  background-color: #0B132B; /* Midnight Navy for a premium contrast step before the footer */
  margin: 0;                 /* No margin: sits flush against the previous section, no background gap */
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;               /* Stretch 100% full width */
  max-width: none;           /* Remove max width restriction */
  border-radius: 0;          /* Flat edge-to-edge for cinematic transition */
}

.graftivo-cta-grid-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  z-index: 1;
  mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
}

.graftivo-cta-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.graftivo-cta-title {
  font-family: var(--font-family-headings);
  font-size: 42px;
  font-weight: 800;
  color: var(--color-bg-base);
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  line-height: 1.15;
}

.graftivo-cta-desc {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 36px 0;
}

.graftivo-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-sec {
  background-color: transparent !important;
  color: var(--color-bg-base) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.cta-sec:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--color-bg-base) !important;
}

/* ==========================================================================
   Adaptabilidad Móvil (Responsiveness)
   ========================================================================== */

@media (max-width: 960px) {
  .graftivo-hero {
    padding: 80px 0;
  }
  
  .graftivo-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  
  .graftivo-hero-content {
    align-items: center;
  }
  
  .graftivo-hero-description {
    margin-left: auto;
    margin-right: auto;
  }
  
  .graftivo-hero-actions {
    justify-content: center;
  }
  
  .graftivo-split-illustration-container {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .graftivo-section-title {
    font-size: 30px;
  }

  .graftivo-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .graftivo-categories-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .graftivo-category-card {
    flex-direction: column;
  }

  .graftivo-category-image {
    width: 100%;
    height: 200px;
  }

  .graftivo-process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .graftivo-testimonial-card {
    flex: 0 0 calc(50% - 12px);
  }

  .graftivo-cta-title {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .graftivo-process-steps {
    grid-template-columns: 1fr;
  }
}

/* --- WORKFLOW SLIDER RESPONSIVENESS OVERRIDES --- */
@media (max-width: 960px) {
  .graftivo-timeline-step {
    padding: 16px;
  }
  .graftivo-timeline-step .step-name {
    font-size: 13px;
  }
  .graftivo-slide-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .graftivo-slide {
    padding: 40px 24px;
  }
  .visual-panel-box {
    height: 220px;
  }
}

@media (max-width: 600px) {
  .about-numbers-row {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .about-number-divider {
    width: 48px;
    height: 1px;
  }

  .graftivo-timeline-nav {
    grid-template-columns: repeat(2, 1fr); /* 2x2 grid for compact mobile tabs */
  }
  .graftivo-timeline-step {
    padding: 12px 8px;
    text-align: center;
    align-items: center;
  }
  .graftivo-timeline-step .step-name {
    font-size: 11px;
    margin-top: 3px;
  }
  .graftivo-timeline-step .progress-bar-bg {
    margin-top: 8px;
  }
  .graftivo-slide-content .slide-title {
    font-size: 22px;
  }
  .graftivo-slide-content .slide-text {
    font-size: 14px;
  }
  
  /* Micro-escalado para que los paneles animados quepan perfectamente en móviles */
  .production-combined-panel {
    gap: 12px !important;
    padding: 10px !important;
  }
  .production-combined-panel .vector-card-preview {
    transform: scale(0.65) !important;
    margin-bottom: -25px !important;
  }
  .production-combined-panel .cmyk-roller-container {
    transform: scale(0.65) !important;
  }
  
  .qc-box-card {
    transform: scale(0.8) !important;
  }
  
  .ship-animate-container {
    transform: scale(0.8) !important;
  }
  
  .graftivo-testimonial-card {
    flex: 0 0 100% !important; /* 1 card visible on mobile */
  }
}


/* --- MINIMALIST ZIG-ZAG TIMELINE --- */
.graftivo-vertical-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}

/* Removed global container line to fix overshoot */

.timeline-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 120px;
  position: relative;
  z-index: 1;
}

/* Timeline connecting lines (perfect center-to-center chaining) */
.timeline-row::before {
  content: '';
  position: absolute;
  top: 50%;
  bottom: -60px; /* Extends exactly through the gap */
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
  z-index: -1;
}
.timeline-row.last-row::before {
  display: none;
}

.timeline-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
  z-index: -1;
}
.timeline-row:first-child::after {
  display: none;
}

.timeline-content, .timeline-empty {
  flex: 0 0 calc(50% - 60px);
  width: calc(50% - 60px);
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

/* Zig-Zag logic */
/* Odd rows (1, 3): text on left, align right */
.timeline-row:nth-child(odd) {
  flex-direction: row;
}
.timeline-row:nth-child(odd) .timeline-content {
  text-align: right;
  align-items: flex-end;
}

/* Even rows (2, 4): text on right, align left */
.timeline-row:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline-row:nth-child(even) .timeline-content {
  text-align: left;
  align-items: flex-start;
}

/* Big Center Icon Node */
.timeline-node {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: var(--color-tertiary);
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg-base);
  box-shadow: 0 4px 12px rgba(47, 143, 131, 0.2);
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-node svg {
  width: 24px;
  height: 24px;
}

/* Typography Overrides */
.timeline-content .slide-badge-num {
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-tertiary); /* Green */
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.timeline-content .slide-title {
  font-family: var(--font-family-headings);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-bg-base);
  margin: 0 0 12px 0;
  letter-spacing: -0.015em;
}

.timeline-content .slide-text {
  font-family: var(--font-family-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 320px;
}

/* Mobile overrides */
@media (max-width: 960px) {
  /* Las líneas de conexión reales son .timeline-row::before/::after (no
     .graftivo-vertical-timeline::before, que no dibuja nada — ver comentario
     "Removed global container line" más arriba). En mobile el círculo se mueve
     a la izquierda (24px = mitad de sus 48px de ancho), así que la línea debe
     seguirlo ahí en vez de quedarse en el 50% del row entero (caía en medio del texto). */
  .timeline-row::before,
  .timeline-row::after {
    left: 24px;
  }

  .timeline-row {
    flex-direction: row !important;
    justify-content: flex-start;
    gap: 30px;
  }
  
  .timeline-empty {
    display: none;
  }
  
  .timeline-content {
    order: 1;
    flex: 1;
    width: auto;
    text-align: left !important;
    align-items: flex-start !important;
    padding-top: 10px;
  }
  
  .timeline-content .slide-text {
    max-width: 100%;
  }

  .timeline-node {
    order: -1;
    flex-shrink: 0;
    position: relative;
    left: 0;
    transform: none;
    width: 48px;
    height: 48px;
    margin-left: 0;
    box-sizing: border-box;
  }
  
  .timeline-node svg {
    width: 20px;
    height: 20px;
  }
}


/* --- RAY & NODE ANIMATION --- */
.timeline-ray {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 2px;
    height: 60px; /* Longer ray */
    background: linear-gradient(to bottom, transparent, var(--color-bg-base), var(--color-bg-base));
    box-shadow: 0 0 10px var(--color-bg-base);
    z-index: 1;
    pointer-events: none;
    border-radius: 10px;
}

.timeline-node {
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Spinner that wraps around the border */
.timeline-node::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent 70%, var(--color-bg-base) 100%);
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 0;
}

.timeline-node.node-active::before {
    opacity: 1;
    animation: spinCharge 1s linear infinite;
}

@keyframes spinCharge {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mask for the center so only the border spins */
.timeline-node::after {
    content: '';
    position: absolute;
    inset: 2px; /* Leaves a 2px gap for the spinner */
    background: var(--color-tertiary);
    border-radius: 50%;
    z-index: 1;
}

.timeline-node svg {
    position: relative;
    z-index: 2;
    transition: all 0.3s;
}

.timeline-node.node-active svg {
    stroke: var(--color-bg-base);
    filter: drop-shadow(0 0 5px var(--color-bg-base));
    animation: iconPulse 1s infinite alternate;
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@media (max-width: 960px) {
  .timeline-ray {
      left: 24px;
  }
}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */

.graftivo-services-page {
    background-color: var(--color-bg-alt); /* Light zinc background for contrast against white bento cards */
}

/* --- Hero Services --- */
.graftivo-hero-services {
    padding: 100px 0 60px;
    background-color: var(--color-bg-base);
    background-image: 
        url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='0' cy='0' r='1.5' fill='rgba(0,0,0,0.35)'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 50%, rgba(47, 143, 131, 0.35) 0%, transparent 75%);
    background-size: 40px 40px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, center center;
    text-align: center;
    position: relative;
    /* Grid is fixed now as requested */
}

.graftivo-hero-services::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    pointer-events: none;
    z-index: 1; /* Above the canvas overlay, below the text */
    background: linear-gradient(to bottom, var(--color-bg-base) 0%, transparent 25%, transparent 75%, var(--color-bg-base) 100%);
}

@keyframes drawShape {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeShapeOut {
    to {
        opacity: 0;
    }
}

.services-hero-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; /* Ensures the text is always above the drawing canvas overlay */
}

/* --- Product Marquee Carousel --- */
.graftivo-product-marquee-section {
    background-color: var(--color-bg-base);
    padding: 40px 0 80px;
    overflow: hidden;
}

.graftivo-marquee-eyebrow {
    display: block;
    font-family: var(--font-family-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-tertiary);
    margin: 0 0 24px;
    position: relative;
    z-index: 2;
}

.graftivo-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Gradient fade on edges */
.graftivo-marquee-container::before,
.graftivo-marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}
.graftivo-marquee-container::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-base), transparent);
}
.graftivo-marquee-container::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-base), transparent);
}

.graftivo-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: scrollMarquee 40s linear infinite;
}

.graftivo-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Scrolls exactly half to loop seamlessly */
}

.marquee-product-card {
    width: 260px;
    background: var(--color-bg-base);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marquee-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: var(--color-tertiary);
}

.marquee-product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--color-border);
}

.marquee-product-info {
    padding: 16px;
    text-align: center;
}

.marquee-product-info .marquee-title {
    font-family: var(--font-family-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

/* WooCommerce specific overrides for Infinite Marquee */
.woo-marquee-track .woocommerce {
    display: flex;
    margin: 0 !important;
}
.woo-marquee-track ul.products {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 24px;
    margin: 0 !important;
    padding: 0 !important;
}
.woo-marquee-track ul.products::before,
.woo-marquee-track ul.products::after {
    display: none !important;
}
.woo-marquee-track ul.products li.product {
    width: 260px !important;
    flex: 0 0 260px !important;
    margin: 0 !important;
    background: var(--color-bg-base);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-bottom: 16px;
    text-align: center;
}
.woo-marquee-track ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: var(--color-tertiary);
}
.woo-marquee-track ul.products li.product img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.woo-marquee-track ul.products li.product h2.woocommerce-loop-product__title,
.woo-marquee-track ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-family-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    padding: 0 16px !important;
    margin: 0 0 8px 0 !important;
}
.woo-marquee-track ul.products li.product .price {
    font-size: 13px !important;
    color: var(--color-secondary) !important;
    margin-bottom: 12px !important;
    display: block;
}
.woo-marquee-track ul.products li.product .button {
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* --- Full-Width Dedicated Service Sections --- */
.graftivo-full-service {
    padding: 120px 0;
    position: relative;
    /* Removed overflow: hidden; because it breaks position: sticky on the children! */
}

.service-theme-light {
    background-color: var(--color-bg-base); /* White/Light */
    color: var(--color-text);
}

.service-theme-alt {
    background-color: var(--color-bg-alt); /* Light gray/zinc */
    color: var(--color-text);
}

.service-theme-dark {
    background-color: var(--color-primary); /* Navy/Dark */
    color: var(--color-bg-base);
}

/* Subtle glow for the dark section.
   NOTA: renombrada desde .graftivo-grid-glow para no colisionar con la clase
   homónima del hero (que usa mask-image para iluminar solo las líneas de la rejilla). */
.graftivo-dark-grid-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    z-index: 1;
}

.graftivo-dark-grid-glow::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(47, 143, 131, 0.1) 0%, transparent 50%);
}

.full-service-header {
    max-width: 800px;
    margin-bottom: 24px;
    /* No position: relative — lets __index below anchor to the wider
       .graftivo-container instead of this centered box, so "02" sits
       at the section's corner instead of the text block's edge. */
}

.full-service-header__index {
    position: absolute;
    top: 10px;         /* Top-left corner of the section */
    left: 0;
    z-index: -1;
    font-family: var(--font-family-headings);
    font-weight: 200;
    font-size: clamp(56px, 7vw, 80px);
    line-height: 1;
    color: var(--color-bg-base);
    opacity: 0.08;
    pointer-events: none;
    white-space: nowrap;
}

.service-tag {
    display: inline-block;
    font-family: var(--font-family-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-tertiary);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.service-headline {
    font-family: var(--font-family-headings);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    line-height: 1.1;
}

.service-theme-dark .service-headline {
    color: var(--color-bg-base);
}

.service-lead {
    font-family: var(--font-family-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.service-theme-dark .service-lead {
    color: rgba(255, 255, 255, 0.7);
}

/* Sub-Product Grids */
.service-subgrid {
    display: grid;
    gap: 40px;
}

.grid-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid-1-col-centered {
    grid-template-columns: 1fr;
    max-width: 800px;
}

/* --- Sub Product Items --- */
.sub-product-title {
    font-family: var(--font-family-headings);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sub-product-desc {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* --- Services Footer --- */
.graftivo-services-footer {
    padding: 80px 0;
    background-color: var(--color-bg-base);
}

.services-footer-box {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 60px;
    text-align: center;
}

.services-footer-title {
    font-family: var(--font-family-headings);
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.services-footer-text {
    font-family: var(--font-family-body);
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

/* --- Animations: Typewriter --- */
.typewriter-text {
    min-height: 52px; /* Prevent layout shift while typing */
}

.typewriter-text:not(.typing-done)::after {
    content: "";
    display: inline-block;
    height: 0.85em;
    margin-left: 0.08em;
    border-left: clamp(2px, 0.055em, 3px) solid var(--color-tertiary);
    vertical-align: -0.08em;
    animation: blinkCursor 0.75s step-end infinite;
}

@keyframes blinkCursor {
    from, to { border-color: transparent }
    50% { border-color: var(--color-tertiary); }
}

/* --- Animations: Fade Up Reveal --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Clip horizontal overflow caused by translateX during the slide-in animation */
.graftivo-categories {
    overflow: hidden;
}

/* Category cards: slide from sides on desktop (left col ← right col →, both converge to center) */
@media (min-width: 769px) {
    .graftivo-category-card.slide-left {
        opacity: 0;
        transform: translateX(-55px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .graftivo-category-card.slide-right {
        opacity: 0;
        transform: translateX(55px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .graftivo-category-card.slide-left.is-visible,
    .graftivo-category-card.slide-right.is-visible {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Scroll-Driven Card Stack --- */
.graftivo-stack-wrapper {
    height: 250vh; /* The distance the user scrolls vertically while pinned */
    position: relative;
    background-color: var(--color-primary); /* Navy/Dark */
    color: var(--color-bg-base);
}

.graftivo-stack-sticky {
    position: sticky;
    top: 0;
    height: 100vh; /* Locks to screen size */
    overflow: hidden; /* Crucial: hides the horizontal overflow */
    display: flex;
    flex-direction: column;
}

/* Blocksy's sticky header would otherwise cover the title while the card
   stack effect is active (graftivo-service.js toggles this class). */
[data-sticky] {
    transition: opacity 0.6s ease;
}
[data-sticky].graftivo-stack-hide-header {
    opacity: 0;
    pointer-events: none;
}

.graftivo-stack-area {
    position: relative;
    flex: 1;           /* Takes whatever space is left under the header,
                           and centers the stack inside just that — so the
                           gap between the lead text and the cards is never
                           left to chance regardless of copy length. */
    min-height: 0;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

/* Static caption below the stack — never moves or transforms with the
   cards, just crossfades its text to match whichever card is at front.
   Generous gap above (in .graftivo-stack-area) gives it room to breathe
   instead of reading as a glued-on label. */
.graftivo-stack-caption {
    font-family: var(--font-family-headings);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-bg-base);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    margin: 0;
}

/* Scroll-driven card stack — same model as the reference component:
   a fixed aspect-ratio stage, each card filling it exactly (absolute,
   inset 0), offset only via top%/scale/brightness per depth. */
.graftivo-stack-stage {
    position: relative;
    width: min(90vw, clamp(370px, 69.333vh, 786px));
    height: auto;
    aspect-ratio: 16 / 9;
}

.graftivo-stack-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    /* Opaco (no rgba transparente) — con fotos reales dentro, un fondo semitransparente
       dejaba traslucir la card de atrás a través de los bordes/zonas alpha del recorte
       de cada foto. Blanco porque las 3 fotos son composiciones de estudio con fondo
       claro — se funde con la imagen en vez de generar un borde navy visible.
       El fade de salida (opacity, en JS) no se ve afectado: opacity actúa sobre el
       elemento completo, sin importar si su fondo interno es sólido o transparente. */
    background-color: var(--color-bg-base);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    will-change: transform, opacity;
    /* Sin transition: transform y opacity los escribe graftivo-service.js en cada
       evento de scroll (rAF-batched), atados 1:1 al progreso — cualquier transición
       aquí competiría contra un valor en constante cambio y se sentiría pegado/trabado
       al revertir la dirección del scroll (ver changelog 2026-07-06). */
    transition: none;
}

/* Oscurece las cards en espera sin usar `filter: brightness()` — ese filter obligaba
   al navegador a re-rasterizar la foto completa en cada tick de scroll (caro con
   imágenes de 1600x900 + canal alpha). Este overlay solo anima `opacity`, una
   propiedad de compositor (GPU), igual de barata que transform. graftivo-service.js
   escribe --stack-dim (0 = sin oscurecer, hasta 0.7 = más al fondo del stack). */
.graftivo-stack-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--stack-dim, 0);
    pointer-events: none;
}

.graftivo-stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Sticky Split Layout --- */
.sticky-layout {
    display: flex;
    gap: 80px;
    align-items: flex-start; /* Important for sticky to work */
}

.sticky-layout.align-center {
    align-items: center;
}

.sticky-sidebar {
    flex: 0 0 40%;
    position: sticky;
    top: 120px; /* Distance from top of viewport when stuck */
}

.scroll-content {
    flex: 0 0 50%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Space between sub-products */
}

/* --- Editorial Service Card Pattern (Apparel / Vinyl Graphics / Marketing Material) --- */
.graftivo-index-number {
    position: absolute;
    top: -70px;        /* Floats above the tag/headline instead of behind them */
    left: 0;           /* Aligned with the text column's own left edge */
    z-index: -1;
    font-family: var(--font-family-headings);
    font-weight: 200;
    font-size: clamp(56px, 7vw, 80px);
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.06;
    pointer-events: none;
    white-space: nowrap;
}

.graftivo-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.graftivo-service-grid--single {
    grid-template-columns: 1fr;
    max-width: 560px;
}

.graftivo-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 32px;
    background: var(--color-bg-base);
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.graftivo-service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at var(--graftivo-card-x, 50%) var(--graftivo-card-y, 50%), rgba(var(--color-secondary-rgb), 0.12) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.graftivo-service-card:hover {
    border-color: var(--color-secondary);
    transform: translateY(-4px);
}

.graftivo-service-card--coming-soon {
    padding-top: 56px;
}

.graftivo-service-card--coming-soon > *:not(.graftivo-coming-soon-banner) {
    opacity: 0.45;
    filter: grayscale(70%);
}

.graftivo-service-card--coming-soon:hover {
    border-color: var(--color-border);
    transform: none;
}

.graftivo-service-card--coming-soon:hover::before {
    opacity: 0;
}

.graftivo-coming-soon-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: var(--color-highlight);
    color: var(--color-primary);
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 0;
}

.graftivo-service-card:hover::before {
    opacity: 1;
}

.graftivo-service-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--color-tertiary);
}

.graftivo-service-card-icon img,
.graftivo-service-card-icon svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.graftivo-service-card .sub-product-title {
    margin-bottom: 8px;
}

.graftivo-service-card .sub-product-desc {
    margin-bottom: 0;
}

.graftivo-service-card .graftivo-btn-magic {
    margin-top: 24px;
}

.graftivo-btn-magic--disabled {
    pointer-events: none;
    user-select: none;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 960px) {
    .graftivo-full-service {
        padding: 80px 0;
    }

    .service-headline {
        font-size: 36px;
    }

    .service-subgrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .sticky-layout {
        flex-direction: column;
        gap: 40px;
    }
    
    .sticky-sidebar {
        flex: none;
        position: static;
        width: 100%;
    }

    .graftivo-index-number {
        top: -40px;
        left: 0;
        font-size: clamp(48px, 18vw, 64px);
    }

    .full-service-header__index {
        top: 16px;
        left: 0;
    }

    .scroll-content {
        flex: none;
        width: 100%;
        margin-left: 0;
        gap: 40px;
    }

    .graftivo-service-grid {
        grid-template-columns: 1fr;
    }

    .services-footer-box {
        padding: 40px 24px;
    }

    /* Reservar altura del typewriter en móvil (el título ocupa ~3 líneas
       mientras se escribe; sin esto el contenido salta) */
    .typewriter-text {
        min-height: 132px;
    }
}

/* ==========================================================================
   PÁGINA DE CONTACTO (page-contact.php)
   ========================================================================== */

.graftivo-contact-page {
    background-color: var(--color-bg-base);
}

/* --- Hero compacto --- */
.graftivo-contact-hero {
    padding: 100px 0 70px;
    background-color: var(--color-bg-base);
    text-align: center;
}

.contact-hero-content {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.contact-hero-content .graftivo-hero-description {
    margin-bottom: 0;
}

/* --- Layout info + formulario --- */
.graftivo-contact-body {
    padding: 80px 0 100px;
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
}

.contact-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Cards de información --- */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.contact-info-card:hover {
    border-color: var(--color-tertiary);
    box-shadow: 0 8px 24px rgba(47, 143, 131, 0.08);
    transform: translateY(-2px);
}

.contact-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(47, 143, 131, 0.08);
    border: 1px solid rgba(47, 143, 131, 0.2);
    color: var(--color-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-icon svg {
    width: 20px;
    height: 20px;
}

.contact-info-title {
    font-family: var(--font-family-headings);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px 0;
}

.contact-info-text {
    font-family: var(--font-family-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0 0 8px 0;
}

.contact-info-link {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

a.contact-info-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Nota de tiempo de respuesta */
.contact-response-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-tertiary);
    padding: 14px 20px;
    background: rgba(47, 143, 131, 0.06);
    border: 1px dashed rgba(47, 143, 131, 0.3);
    border-radius: 10px;
}

.contact-note-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-tertiary);
    flex-shrink: 0;
    animation: contactNotePulse 2.2s ease-in-out infinite;
}

@keyframes contactNotePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

/* --- Card del formulario --- */
.contact-form-card {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(27, 45, 92, 0.04);
}

.contact-form-title {
    font-family: var(--font-family-headings);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
}

.contact-form-sub {
    font-family: var(--font-family-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 28px 0;
}

/* Overrides de Forminator para tema claro (el de coming-soon/popup es oscuro) */
.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-input,
.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea {
    background: var(--color-bg-alt) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-primary) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 16px !important; /* Mínimo 16px: evita auto-zoom de iOS al enfocar */
}

.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-input:focus,
.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-textarea:focus {
    border-color: var(--color-secondary) !important;
    background: var(--color-bg-base) !important;
}

.contact-form-card .forminator-label {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit {
    background: var(--color-secondary) !important;
    color: var(--color-bg-base) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin-top: 10px !important;
    transition: background 0.2s, transform 0.2s !important;
}

.contact-form-card .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit:hover {
    background: var(--color-secondary-hover) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   PÁGINA ABOUT (page-about.php)
   ========================================================================== */

.graftivo-about-page {
    background-color: var(--color-bg-base);
}

/* --- 1. Hero: glow radial + typewriter (sin cuadrícula) --- */
.graftivo-about-hero {
    padding: 120px 0 100px;
    background-color: var(--color-bg-base);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.graftivo-about-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(26, 115, 232, 0.10) 0%, rgba(47, 143, 131, 0.07) 45%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.about-hero-content {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.about-statement {
    font-family: var(--font-family-headings);
    font-size: clamp(36px, 5.5vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--color-primary);
    margin: 0 0 24px 0;
}

.about-hero-sub {
    margin-bottom: 0 !important;
}

/* --- 2. What We Do: editorial asimétrico --- */
.graftivo-about-craft {
    padding: 120px 0 100px;
    background-color: var(--color-bg-alt);
}

.about-craft-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
}

.about-craft-title {
    font-family: var(--font-family-headings);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 12px 0 0;
}

.about-craft-copy {
    font-family: var(--font-family-body);
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.about-craft-copy p {
    margin: 0 0 var(--space-md);
}

.about-craft-copy p:last-child {
    margin-bottom: 0;
}

.about-craft-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 40px 0 0;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.about-craft-list li {
    padding: 0 var(--space-lg);
    border-left: 1px solid var(--color-border);
}

.about-craft-list li:first-child {
    padding-left: 0;
    border-left: none;
}

/* --- 3. Our Story: párrafo editorial corto --- */
.graftivo-about-story {
    padding: 120px 0 100px;
    background-color: var(--color-bg-base);
    text-align: center;
}

.about-story-content {
    max-width: 700px;
    margin: 0 auto;
}

.about-story-quote {
    font-family: var(--font-family-headings);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 16px 0 24px;
}

.about-story-text {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

/* --- 4. By the Numbers: renglón minimalista --- */
.graftivo-about-numbers {
    padding: 120px 0 100px;
    background-color: var(--color-bg-alt);
}

.about-numbers-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
}

.about-number {
    text-align: center;
}

.about-number-divider {
    width: 1px;
    height: 48px;
    background: var(--color-border);
}

.about-number-value {
    font-family: var(--font-family-headings);
    font-size: 48px;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.about-number-suffix {
    font-family: var(--font-family-headings);
    font-size: 28px;
    font-weight: 800;
    margin-left: 4px;
    color: var(--color-tertiary);
}

.about-number-label {
    display: block;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

/* ==========================================================================
   Responsive: Contacto y About
   ========================================================================== */

@media (max-width: 960px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .contact-form-card {
        padding: 28px 20px;
    }

    .about-craft-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .about-craft-list {
        flex-direction: column;
        align-items: center;
    }

    .about-craft-list li {
        padding: var(--space-xs) 0;
        border-left: none;
    }

    .about-numbers-row {
        gap: var(--space-lg);
    }

    .about-number-value {
        font-size: 36px;
    }

    .graftivo-about-hero {
        padding: 90px 0 60px;
    }

    .graftivo-contact-hero {
        padding: 70px 0 50px;
    }
}

/* ==========================================================================
   GRAFTIVO CUSTOM POPUP MODAL
   ========================================================================== */
.graftivo-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Sombra suave */
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.graftivo-popup-overlay.popup-active {
    opacity: 1; pointer-events: all; visibility: visible;
}

/* Wrapper exterior que permite elementos sobresalientes */
.graftivo-popup-wrapper {
    position: relative;
    max-width: 500px; width: 90%;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.graftivo-popup-overlay.popup-active .graftivo-popup-wrapper {
    transform: translateY(0) scale(1);
}

.graftivo-popup-container {
    background: transparent;
    border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 50px rgba(47, 143, 131, 0.1);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    text-align: center;
    overflow: hidden; /* Corta la luz sobrante, pero no el badge porque está en el wrapper */
    width: 100%; box-sizing: border-box;
}

/* Animación de Rotación de Luz */
@keyframes spinPopupGlow {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* La Luz que gira (Conic Gradient) */
.graftivo-popup-container::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: conic-gradient(transparent, transparent, transparent, var(--color-secondary), var(--color-tertiary), var(--color-highlight), transparent);
    animation: spinPopupGlow 4s linear infinite;
    z-index: 0;
}

/* El fondo AZUL MARINO (Dark Mode) que tapa el centro */
.graftivo-popup-container::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: var(--color-primary); /* Azul Marino Oficial del Blueprint */
    border-radius: 18px; 
    z-index: 1;
}

/* Asegurar que el contenido del formulario flote por encima de la luz */
.graftivo-popup-close, .popup-content {
    position: relative;
    z-index: 2;
}

.graftivo-popup-close {
    position: absolute; top: 15px; right: 20px;
    background: transparent; border: none;
    color: rgba(255,255,255,0.6); /* Gris claro */
    font-size: 28px; cursor: pointer; transition: 0.3s;
}
.graftivo-popup-close:hover { color: var(--color-bg-base); transform: scale(1.1); }

/* Badge movido al wrapper */
.graftivo-popup-wrapper .discount-badge {
    position: absolute; top: -15px; right: 30px;
    background: #EAB308; color: #000; font-family: "Montserrat", sans-serif;
    font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 20px;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3); z-index: 10;
}

.popup-content h3 { font-family: "Montserrat", sans-serif; font-size: 24px; color: var(--color-bg-base); margin-top: 0; margin-bottom: 12px; }
.popup-content .newsletter-desc { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 24px; line-height: 1.5; }

/* Force Forminator Custom Styles for Dark Mode */
.graftivo-popup-container .forminator-ui.forminator-custom-form[data-design=default] .forminator-input { background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: white !important; border-radius: 8px !important; padding: 14px 16px !important; }
.graftivo-popup-container .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit { background: var(--color-tertiary) !important; color: white !important; border-radius: 8px !important; font-weight: 600 !important; width: 100% !important; margin-top: 10px !important; transition: 0.3s; }
.graftivo-popup-container .forminator-ui.forminator-custom-form[data-design=default] .forminator-button-submit:hover { background: var(--color-secondary) !important; transform: translateY(-2px); }
.graftivo-popup-container .forminator-ui { text-align: left !important; }

/* ==========================================================================
   Legal Pages (Terms, Privacy, Cookie Policy, Refund Policy)
   ========================================================================== */

.graftivo-legal-hero {
  background: var(--color-primary);
  padding: var(--space-3xl) 0;
  text-align: center;
}

.graftivo-legal-title {
  font-family: var(--font-family-headings);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-bg-base);
  margin: 0;
}

.graftivo-legal-updated {
  font-family: var(--font-family-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-align: center;
  margin: var(--space-lg) 0 0;
}

.graftivo-legal-body {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.graftivo-legal-content {
  font-family: var(--font-family-body);
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.graftivo-legal-content h2 {
  font-family: var(--font-family-headings);
  color: var(--color-primary);
  font-size: 26px;
  font-weight: 700;
  margin: var(--space-2xl) 0 var(--space-md);
}

.graftivo-legal-content h3 {
  font-family: var(--font-family-headings);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  margin: var(--space-xl) 0 var(--space-sm);
}

.graftivo-legal-content p {
  margin: 0 0 var(--space-md);
}

.graftivo-legal-content ul,
.graftivo-legal-content ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
}

.graftivo-legal-content li {
  margin-bottom: var(--space-xs);
}

.graftivo-legal-content a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.graftivo-legal-content strong {
  color: var(--color-text);
}
.graftivo-popup-container .forminator-label { color: rgba(255,255,255,0.9) !important; margin-bottom: 8px; display: block; font-weight: 500 !important; }

/* ==========================================================================
   PÁGINA PORTFOLIO (page-portfolio.php)
   ========================================================================== */

.graftivo-portfolio-page {
  background-color: var(--color-bg-base);
}

/* --- 1. Hero --- */
.graftivo-portfolio-hero {
  padding: 120px 0 100px;
  background-color: var(--color-bg-base);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.graftivo-portfolio-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(26, 115, 232, 0.10) 0%, rgba(47, 143, 131, 0.07) 45%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.graftivo-portfolio-hero-content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.graftivo-portfolio-statement {
  font-family: var(--font-family-headings);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 20px 0;
}

/* --- 2. Category sections --- */
.graftivo-portfolio-category-section {
  padding: 80px 0;
}

.graftivo-portfolio-category-header {
  margin-bottom: 40px;
}

.graftivo-portfolio-category-title {
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tertiary);
  margin: 0;
}

.graftivo-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* --- 3. Project card --- */
.graftivo-portfolio-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-portfolio-card:hover,
.graftivo-portfolio-card:focus-visible {
  border-color: var(--color-border-hover);
  box-shadow: 0 16px 40px rgba(27, 45, 92, 0.06);
  transform: translateY(-3px);
}

.graftivo-portfolio-card:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.graftivo-portfolio-card-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.graftivo-portfolio-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.graftivo-portfolio-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.08) 0%, rgba(47, 143, 131, 0.10) 100%);
}

.graftivo-portfolio-placeholder-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.graftivo-portfolio-card-info {
  padding: 18px 20px;
}

.graftivo-portfolio-card-title {
  font-family: var(--font-family-headings);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 6px 0;
}

.graftivo-portfolio-card-category {
  font-family: var(--font-family-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* --- 4. Lightbox --- */
.graftivo-portfolio-lightbox {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 640px;
  width: 90vw;
  background: var(--color-bg-base);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.graftivo-portfolio-lightbox::backdrop {
  background: rgba(11, 19, 43, 0.6);
  backdrop-filter: blur(4px);
}

.graftivo-portfolio-lightbox[open] {
  animation: graftivoLightboxIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.graftivo-portfolio-lightbox.no-anim[open] {
  animation: none;
}

@keyframes graftivoLightboxIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.graftivo-portfolio-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-primary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.graftivo-portfolio-lightbox-close:hover {
  background: var(--color-bg-base);
}

.graftivo-portfolio-lightbox-visual {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.graftivo-portfolio-lightbox-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.graftivo-portfolio-lightbox-info {
  padding: 24px 28px 28px;
}

.graftivo-portfolio-lightbox-category {
  display: block;
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tertiary);
  margin-bottom: 8px;
}

.graftivo-portfolio-lightbox-title {
  font-family: var(--font-family-headings);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 10px 0;
}

.graftivo-portfolio-lightbox-desc {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

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

@media (max-width: 600px) {
  .graftivo-portfolio-hero {
    padding: 90px 0 70px;
  }

  .graftivo-portfolio-grid {
    grid-template-columns: 1fr;
  }

  .graftivo-portfolio-lightbox {
    width: 94vw;
  }
}

/* ==========================================================================
   PÁGINA SUBMIT TESTIMONIAL (page-submit-testimonial.php)
   ========================================================================== */

.graftivo-testimonial-submit-hero {
    padding: 100px 0 60px;
    background-color: var(--color-bg-base);
    text-align: center;
}

.testimonial-submit-hero-content {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-submit-hero-content .graftivo-hero-description {
    margin-bottom: 0;
}

.graftivo-testimonial-submit-body {
    padding: 20px 0 100px;
    background-color: var(--color-bg-base);
}

.testimonial-submit-form-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(27, 45, 92, 0.04);
}

@media (max-width: 600px) {
    .graftivo-testimonial-submit-hero {
        padding: 80px 0 50px;
    }

    .testimonial-submit-form-card {
        padding: 28px 20px;
    }
}

/* ==========================================================================
   PÁGINA SCREEN PRINTING QUOTE (page-screen-printing-quote.php)
   ========================================================================== */

.graftivo-quote-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(27, 45, 92, 0.04);
}

.graftivo-quote-form-wrapper input,
.graftivo-quote-form-wrapper textarea,
.graftivo-quote-form-wrapper select {
    font-size: 16px;
}

@media (max-width: 600px) {
    .graftivo-quote-form-wrapper {
        padding: 28px 20px;
    }
}