:root {
  /* core-tokens:start */
  /* Color primitives */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-navy-900: #012e46;
  --color-navy-900-rgb: 1, 46, 70;
  --color-navy-alpha-08: #012e4614;
  --color-blue-50: #eff7fb;
  --color-blue-50-rgb: 239, 247, 251;
  --color-bluegray-400: #7e96a2;
  --color-bluegray-400-rgb: 126, 150, 162;
  --color-bluegray-600: #536875;
  --color-bluegray-600-rgb: 83, 104, 117;
  --color-bluegray-700: #33576b;
  --color-bluegray-700-rgb: 51, 87, 107;
  --color-blue-500: #0098d7;
  --color-blue-500-rgb: 0, 152, 215;
  --color-blue-600: #006f9d;
  --color-blue-800: #09597b;
  --color-blue-800-rgb: 9, 89, 123;
  --color-orange-50: #fff6ee;
  --color-orange-200: #f9a66c;
  --color-orange-500: #f7841c;
  --color-orange-500-rgb: 247, 132, 28;
  --color-orange-600: #d76d10;
  --color-orange-700: #aa5117;
  --color-neutral-50: #f8fafd;
  --color-neutral-100: #edf0f7;
  --color-neutral-100-rgb: 237, 240, 247;
  --color-neutral-200: #e5e9ef;
  --color-neutral-300: #cbd5e1;
  --color-neutral-300-rgb: 203, 213, 225;
  --color-neutral-400: #b9b9bd;
  --color-warning-50: #fff9e8;
  --color-warning-200: #f1c979;
  --color-warning-400: #eab308;
  --color-warning-400-rgb: 234, 179, 8;
  --color-warning-500: #d49a00;
  --color-warning-700: #8a5d00;
  --color-danger-500: #c83030;
  --color-danger-500-rgb: 200, 48, 48;
  --color-danger-600: #e11d48;
  --color-danger-600-rgb: 225, 29, 72;
  --color-danger-700: #be123c;
  --color-danger-800: #b42318;
  --color-success-600: #39991c;
  --color-success-600-rgb: 57, 153, 28;
  --color-success-650: #107e4f;
  --color-success-650-rgb: 16, 126, 79;
  --color-success-700: #0f6d45;
  --color-whatsapp: #25d366;
  --color-whatsapp-rgb: 37, 211, 102;
  --color-whatsapp-hover: #1eb856;
  --color-whatsapp-dark: #128c46;
  --color-whatsapp-dark-rgb: 18, 140, 70;
  --color-corporate-orange: #ff7900;
  --color-corporate-orange-rgb: 255, 121, 0;
  --color-corporate-blue: #009ed2;
  --color-corporate-blue-dark: #007da8;
  --color-payment-visa: #1a1f71;
  --color-payment-mastercard: #eb001b;
  --color-payment-amex: #006fcf;
  --color-payment-webpay: #d6001c;
  --color-payment-transbank: #0055a3;

  /* Semantic colors */
  --background: var(--color-white);
  --background-alt: var(--color-neutral-50);
  --surface: var(--color-neutral-100);
  --accent: var(--color-bluegray-400);
  --border: var(--color-neutral-300);
  --accent-3: var(--color-neutral-200);
  --accent-alt: var(--color-orange-500);
  --accent-alt-hover: var(--color-orange-600);
  --accent-4: var(--color-navy-900);
  --accent-4-hover: var(--color-bluegray-700);
  --accent-secondary: var(--color-blue-500);
  --danger: var(--color-danger-600);
  --success: var(--color-success-600);
  --text-primary: rgba(var(--color-black-rgb), 0.87);
  --text-secondary: rgba(var(--color-black-rgb), 0.54);
  --text-heading: var(--color-navy-900);
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: rgba(var(--color-white-rgb), 0.72);
  --text-on-accent: var(--color-white);
  --text-on-accent-alt: var(--color-white);
  --text-on-accent-secondary: var(--color-white);
  --text-on-success: var(--color-black);
  --text-on-danger: var(--color-white);
  --text-on-whatsapp: var(--color-black);
  --text-on-corporate: var(--color-black);
  --feedback-neutral-background: var(--color-neutral-50);
  --feedback-neutral-border: var(--color-neutral-300);
  --feedback-neutral-icon: var(--color-bluegray-700);
  --feedback-info-background: var(--color-blue-50);
  --feedback-info-border: var(--color-blue-500);
  --feedback-info-icon: var(--color-blue-800);
  --feedback-success-background: rgba(var(--color-success-650-rgb), 0.08);
  --feedback-success-border: var(--color-success-650);
  --feedback-success-icon: var(--color-success-700);
  --feedback-warning-background: var(--color-warning-50);
  --feedback-warning-border: var(--color-warning-500);
  --feedback-warning-icon: var(--color-warning-700);
  --feedback-error-background: rgba(var(--color-danger-500-rgb), 0.08);
  --feedback-error-border: var(--color-danger-500);
  --feedback-error-icon: var(--color-danger-800);

  /* Typography */
  --font-body: Montserrat, Arial, sans-serif;
  --font-heading: Raleway, Montserrat, Arial, sans-serif;
  --font-handwritten: Caveat, "Segoe Print", cursive;
  --font-icon: "Material Symbols Outlined";
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --text-5xl: 2.5rem;
  --text-6xl: 3rem;
  --text-7xl: 3.5rem;
  --text-8xl: 4rem;
  --text-9xl: 5rem;
  --text-10xl: 6rem;
  --section-title-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --leading-compressed: 0.8;
  --leading-condensed: 0.9;
  --leading-none: 1;
  --leading-display: 1.08;
  --leading-title: 1.15;
  --leading-heading: 1.2;
  --leading-tight: 1.25;
  --leading-snug: 1.35;
  --leading-body: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.75;
  --tracking-normal: 0;
  --tracking-label: 0.04em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.12em;
  /* Figma GT / Atoms / Button, Size=M */
  --button-m-height: var(--space-8);
  --button-m-padding-inline: var(--space-4);
  --button-m-font-size: 0.8125rem;
  --button-m-line-height: 18px;
  --button-m-radius: 6px;

  /* Shape, elevation, motion and layers */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-round: 50%;
  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-2);
  --radius-lg: var(--radius-3);
  --radius-xl: var(--radius-4);
  --radius-pill: 999px;
  --shadow-1: 0 4px 5px rgba(156, 161, 168, 0.2);
  --shadow-2: 0 10px 24px rgba(var(--color-navy-900-rgb), 0.08);
  --card-hover-lift: -3px;
  --card-hover-border: var(--accent-3);
  --card-hover-shadow: 0 16px 34px rgba(var(--color-navy-900-rgb), 0.14);
  --card-hover-duration: var(--duration-normal);
  --elevation-subtle: 0 4px 16px rgba(var(--color-navy-900-rgb), 0.06);
  --elevation-card: 0 8px 18px rgba(var(--color-navy-900-rgb), 0.06);
  --elevation-raised: 0 18px 42px rgba(var(--color-navy-900-rgb), 0.12);
  --elevation-overlay: 0 22px 54px rgba(var(--color-navy-900-rgb), 0.16);
  --focus-ring: 0 0 0 3px rgba(var(--color-orange-500-rgb), 0.36);
  --focus-ring-navy: 0 0 0 3px rgba(var(--color-navy-900-rgb), 0.22);
  --focus-ring-error: 0 0 0 3px rgba(var(--color-danger-500-rgb), 0.18);
  --inset-border: 0 0 0 1px var(--accent-3);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --duration-reduced: 0.01ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: ease-out;
  --z-behind: -2;
  --z-underlay: -1;
  --z-base: 0;
  --z-content: 1;
  --z-control: 2;
  --z-floating: 3;
  --z-elevated: 4;
  --z-raised: 10;
  --z-dropdown: 20;
  --z-popover: 30;
  --z-sticky: 40;
  --z-sticky-nav: 45;
  --z-fixed: 50;
  --z-overlay: 60;
  --z-overlay-raised: 70;
  --z-modal: 80;
  --z-modal-backdrop: 81;
  --z-modal-content: 82;
  --z-toast: 90;
  --container: clamp(1180px, 92vw, 2200px);
  --content-container: 1500px;
  /* core-tokens:end */

  /* spacing-tokens:start — 8px base, 4px half-step */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;
  --space-21: 84px;
  --space-22: 88px;
  --space-23: 92px;
  --space-24: 96px;
  --space-25: 100px;
  --space-26: 104px;
  --space-27: 108px;
  --space-28: 112px;
  --space-29: 116px;
  --space-30: 120px;
  --space-31: 124px;
  --space-32: 128px;
  --space-33: 132px;
  --space-34: 136px;
  --space-35: 140px;
  --space-36: 144px;
  --space-37: 148px;
  --space-38: 152px;
  --space-39: 156px;
  --space-40: 160px;
  --space-41: 164px;
  --space-42: 168px;
  --space-43: 172px;
  --space-44: 176px;
  --space-45: 180px;
  --space-46: 184px;
  --space-47: 188px;
  --space-48: 192px;
  --space-49: 196px;
  --space-50: 200px;
  --space-51: 204px;
  --space-52: 208px;
  --space-53: 212px;
  --space-54: 216px;
  --space-55: 220px;
  --space-56: 224px;
  --space-57: 228px;
  --space-58: 232px;
  --space-59: 236px;
  --space-60: 240px;
  --space-61: 244px;
  --space-62: 248px;
  --space-63: 252px;
  --space-64: 256px;

  --space-half: var(--space-1);
  --space-grid: var(--space-2);
  --space-2xs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);
  --space-4xl: var(--space-20);
  --space-5xl: var(--space-24);

  --layout-gutter: clamp(var(--space-md), 4vw, var(--space-25));
  --layout-section-compact: var(--space-2xl);
  --layout-section: var(--space-3xl);
  --layout-section-spacious: var(--space-4xl);
  --component-gap-compact: var(--space-xs);
  --component-gap: var(--space-md);
  --component-gap-comfortable: var(--space-lg);
  --heading-subtitle-gap: var(--space-3);
  --heading-action-gap: var(--space-7);
  --control-padding-block: var(--space-xs);
  --control-padding-inline: var(--space-sm);
  --button-padding-block: var(--space-sm);
  --button-padding-inline: var(--space-5);
  /* spacing-tokens:end */

  /* Badge component tokens: compact labels, independent of their parent text size. */
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--font-bold);
  --badge-line-height: var(--leading-tight);
  --badge-padding-block: var(--space-1);
  --badge-padding-inline: var(--space-2);
  --badge-min-height: var(--space-6);
  --badge-radius: var(--radius-pill);

  /* Inline alert: contextual feedback with an optional dismiss action. */
  --alert-min-height: var(--space-14);
  --alert-padding-block: var(--space-3);
  --alert-padding-inline: var(--space-4);
  --alert-content-gap: var(--space-3);
  --alert-border-width: 1px;
  --alert-radius: var(--radius-sm);
  --alert-icon-size: var(--space-6);
  --alert-dismiss-size: var(--space-8);
  --alert-font-size: var(--text-sm);
  --alert-line-height: var(--leading-body);
  --alert-duration: var(--duration-fast);

  /* Figma GT / Molecules / Alert adapted to the floating toast context. */
  --toast-max-width: 480px;
  --toast-min-height: var(--space-14);
  --toast-padding: var(--space-4);
  --toast-content-gap: var(--space-2);
  --toast-stack-gap: var(--space-3);
  --toast-radius: var(--radius-md);
  --toast-background: var(--background-alt);
  --toast-color: var(--text-primary);
  --toast-font-size: var(--text-sm);
  --toast-line-height: 20px;
  --toast-close-size: var(--space-8);
  --toast-offset-inline: var(--space-5);
  --toast-offset-block: var(--space-24);
  --toast-shadow: var(--elevation-raised);
  --toast-duration: var(--duration-normal);

  /* Coupon form: one input and action contract for cart and checkout. */
  --coupon-control-height: var(--space-11);
  --coupon-input-background: var(--background);
  --coupon-input-color: var(--text-primary);
  --coupon-input-placeholder-color: var(--text-secondary);
  --coupon-input-border-color: var(--accent-3);
  --coupon-input-border-color-hover: var(--accent);
  --coupon-input-border-color-focus: var(--accent-secondary);
  --coupon-input-border-color-error: var(--feedback-error-border);
  --coupon-input-disabled-background: var(--surface);
  --coupon-input-disabled-color: var(--text-secondary);
  --coupon-input-radius: var(--radius-md);
  --coupon-input-padding-inline: var(--space-3);
  --coupon-input-focus-ring: var(--focus-ring-navy);
  --coupon-input-error-ring: var(--focus-ring-error);
  --coupon-input-transition-duration: var(--duration-fast);
  --coupon-button-background: var(--accent-4);
  --coupon-button-background-hover: var(--accent-4-hover);
  --coupon-button-color: var(--text-on-dark);
  --coupon-button-disabled-background: var(--surface);
  --coupon-button-disabled-color: var(--text-secondary);
  --coupon-button-focus-ring: var(--focus-ring-navy);
  --coupon-button-radius: var(--radius-md);

  /* FAQ component tokens: one accordion language across every storefront context. */
  --faq-list-gap: var(--space-3);
  --faq-item-background: var(--background);
  --faq-item-border: var(--accent-3);
  --faq-item-border-active: var(--accent-alt);
  --faq-item-radius: var(--radius-2);
  --faq-item-shadow: var(--shadow-1);
  --faq-question-background: var(--background);
  --faq-question-background-interactive: var(--color-orange-50);
  --faq-question-color: var(--text-heading);
  --faq-question-color-active: var(--accent-alt);
  --faq-question-font-size: var(--text-base);
  --faq-question-font-weight: var(--font-semibold);
  --faq-question-line-height: var(--leading-snug);
  --faq-question-min-height: var(--space-14);
  --faq-question-padding-block: var(--space-5);
  --faq-question-padding-inline: var(--space-6);
  --faq-answer-color: var(--text-primary);
  --faq-answer-font-size: var(--text-base);
  --faq-answer-line-height: var(--leading-body);
  --faq-answer-padding-block: var(--space-5);
  --faq-answer-padding-inline: var(--space-6);
  --faq-focus-ring: inset 0 0 0 2px var(--accent-alt);

  /* Fluid desktop frame; preserves physical scale when the browser is zoomed out. */
  --header-logo-width: clamp(122px, 8.8vw, 210px);
  --header-nav-size: clamp(var(--text-xs), 1vw, var(--text-sm));
  --header-nav-weight: var(--font-regular);
  --header-subnav-size: var(--text-base);
  --header-subnav-weight: var(--font-regular);
  --header-icon-size: clamp(44px, 3vw, 64px);
  --header-cart-count-size: var(--space-6);
  --header-cart-count-font-size: var(--text-sm);
  --header-cart-count-line-height: var(--leading-none);
  --header-cart-count-padding-inline: var(--space-1);
  --header-cart-count-offset: calc(var(--space-1) * -1);
  --header-cart-count-border: 2px solid var(--color-white);
  --header-cart-count-shadow: 0 6px 14px rgba(var(--color-orange-500-rgb), 0.28);
  --shop-filter-sidebar-width: clamp(240px, 14vw, 260px);
  --hero-display-size: clamp(var(--text-5xl), 4vw, var(--text-9xl));
  --hero-display-line-height: 1.17;
  --hero-display-tracking: -0.015em;
  --hero-text-shadow: 0 3px 6px rgba(var(--color-black-rgb), .56);
  --hero-content-width: min(92vw, 1280px);
  --hero-lead-size: clamp(var(--text-lg), 1.5vw, var(--text-2xl));
  --hero-lead-width: min(80vw, 1000px);
  --hero-eyebrow-size: clamp(var(--text-base), 1.6vw, var(--text-3xl));
  --hero-eyebrow-line-height: 1.2;
  --hero-action-size: clamp(var(--text-base), 1vw, var(--text-lg));
  --hero-action-height: clamp(48px, 3vw, 72px);
  --header-promo-size: clamp(var(--text-sm), .85vw, var(--text-base));
  --hero-banner-media-height: max(500px, 41.6667vw);
  --hero-banner-controls-height: 36px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

/* glasstech.cl usa el espaciado natural de Montserrat y Raleway para texto corrido. */
body, button, input, select, textarea {
  letter-spacing: var(--tracking-normal);
  font-synthesis: none;
}

a { color: inherit; text-decoration: none; }

button, input, select { font: inherit; }

img { display: block; max-width: 100%; }

.container {
  width: min(100% - calc(var(--layout-gutter) * 2), var(--container));
  margin-inline: auto;
}

main .container {
  max-width: var(--content-container);
}

.sr-only,
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.skip-link:focus {
  width: auto;
  height: auto;
  clip: auto;
  z-index: var(--z-dropdown);
  padding: var(--space-3) var(--space-3);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
}

.top-strip {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
}

.top-strip p { margin: 0; }
.top-strip a { font-weight: var(--font-bold); color: var(--accent-alt); }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  background: rgba(var(--color-white-rgb), 0.97);
  border-bottom: 1px solid var(--accent-3);
}

.header-main {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) 0;
}

.brand {
  display: grid;
  gap: var(--space-1);
  align-items: center;
}

.brand-logo img {
  width: min(210px, 42vw);
  height: auto;
}

.context-logo,
.footer-brand img {
  width: 170px;
  height: auto;
}

.context-logo {
  margin-bottom: var(--space-1);
}

.brand-subtitle {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.search-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-white);
}

.search-form input {
  min-width: 0;
  border: 0;
  padding: var(--space-3) var(--space-4);
  outline: none;
}

.search-form button {
  border: 0;
  padding: 0 var(--space-5);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--font-bold);
  cursor: pointer;
}

.search-form.has-search-suggestions {
  overflow: visible;
}

.search-form.has-search-suggestions > button {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.search-suggestions {
  position: absolute;
  z-index: var(--z-sticky);
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid rgba(var(--color-blue-500-rgb), 0.22);
  border-radius: var(--radius-md);
  background: var(--color-neutral-50);
  box-shadow: 0 22px 46px rgba(var(--color-navy-900-rgb), 0.16);
}

.search-suggestions[hidden] {
  display: none;
}

.search-suggestions .search-suggestion-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid rgba(var(--color-neutral-300-rgb), 0.72);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--text-heading);
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(var(--color-navy-900-rgb), 0.04);
}

.search-suggestions .search-suggestion-item:hover,
.search-suggestions .search-suggestion-item:focus {
  outline: none;
  background: rgba(var(--color-orange-500-rgb), 0.10);
  border-color: rgba(var(--color-orange-500-rgb), 0.24);
}

.search-suggestion-thumb,
.search-suggestion-kind {
  grid-column: 1;
  grid-row: 1;
}

.search-suggestion-thumb {
  display: block;
  width: 54px;
  height: 46px;
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.search-suggestion-kind {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
}

.search-suggestion-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.search-suggestion-item strong {
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestion-item small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.search-suggestion-item > .material-symbols-outlined:last-child {
  grid-column: 3;
  grid-row: 1;
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

.search-suggestion-empty {
  padding: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.cart-link span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: var(--text-xs);
}

.category-nav { border-top: 1px solid var(--accent-3); }

.category-nav-inner {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  padding: var(--space-3) 0;
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  white-space: nowrap;
}

.hero-section {
  background: linear-gradient(90deg, var(--background-alt), var(--color-white));
  padding: var(--space-14) 0 var(--space-10);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: var(--space-10);
  align-items: center;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--accent-alt);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; line-height: var(--leading-display); }

h1 {
  max-width: 760px;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-7xl));
  font-weight: var(--font-bold);
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--section-title-size);
  font-weight: var(--font-bold);
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin: var(--space-5) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  cursor: pointer;
}

.btn-primary { background: var(--accent-alt); color: var(--text-on-accent-alt); }
.btn-primary:hover { background: var(--accent-alt-hover); }
.btn-secondary { background: var(--color-white); border-color: var(--border); color: var(--accent-4); }
.btn-disabled { background: var(--surface); color: var(--text-secondary); cursor: not-allowed; }
.btn-block { width: 100%; }

.text-link,
.link-button {
  border: 0;
  background: transparent;
  color: var(--accent-alt);
  font-weight: var(--font-bold);
  cursor: pointer;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-7) 0 0;
}

.hero-metrics div {
  padding: var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.hero-metrics dt {
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

.hero-metrics dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.hero-visual {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-3);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.hero-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-visual figcaption {
  padding: var(--space-3) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.category-section,
.shop-section,
.detail-section,
.config-section,
.checkout-preview,
.checkout-form-section,
.account-section { padding: var(--space-14) 0; }

.split-heading,
.panel-header,
.product-toolbar,
.order-line,
.order-total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
}

.order-line[hidden] { display: none; }

.section-heading { margin-bottom: var(--space-5); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.flow-card,
.category-card,
.product-card,
.config-card,
.order-card,
.filters-panel,
.gallery-panel,
.measure-helper,
.purchase-box,
.checkout-form,
.confirmation-card,
.orders-table {
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.category-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
}

.category-card:hover { border-color: var(--accent-alt); }

.category-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--accent-4);
  font-weight: var(--font-bold);
}

.category-card p,
.product-card p,
.config-copy p,
.checkout-preview p,
.site-footer p,
.detail-copy p,
.account-section p,
.confirmation-card p { color: var(--text-secondary); }

.shop-section,
.detail-section.alt,
.account-section { background: var(--background-alt); }

.shop-discovery {
  position: relative;
  z-index: var(--z-content);
  margin: 0 0 var(--space-5);
  padding: 0;
  background: transparent;
}

.shop-discovery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.shop-search-spotlight {
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: var(--space-6);
  width: 100%;
  min-height: 0;
  padding: clamp(var(--space-6), 3.4vw, var(--space-10));
  border: 1px solid rgba(var(--color-blue-500-rgb), 0.22);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(var(--color-white-rgb), 0.98), rgba(var(--color-blue-50-rgb), 0.98)),
    linear-gradient(90deg, rgba(var(--color-navy-900-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--color-navy-900-rgb), 0.04) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  box-shadow: var(--elevation-overlay);
}

.shop-search-spotlight .eyebrow {
  margin-bottom: var(--space-1);
}

.shop-search-spotlight h2 {
  max-width: 820px;
  color: var(--text-heading);
  font-size: clamp(var(--text-2xl), 2.7vw, var(--text-4xl));
  line-height: var(--leading-display);
}

.shop-search-hero-form {
  width: 100%;
  max-width: none;
  min-height: 72px;
  border-color: rgba(var(--color-blue-500-rgb), 0.34);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--elevation-raised);
}

.shop-search-hero-form:focus-within {
  border-color: var(--accent-alt);
  box-shadow: 0 22px 46px rgba(var(--color-orange-500-rgb), 0.18);
}

.shop-search-hero-form input {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
}

.shop-search-hero-form button {
  min-width: 78px;
  background: var(--accent-alt);
}

.shop-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.filters-panel { padding: var(--space-4); position: sticky; top: 158px; }

.filters-panel h2 { font-size: var(--text-xl); }

.shop-filter-group {
  margin-top: var(--space-3);
  border: 1px solid rgba(var(--color-neutral-300-rgb), 0.78);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-50);
  overflow: hidden;
}

.shop-filter-group summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: var(--space-2) var(--space-9) var(--space-2) var(--space-3);
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  cursor: pointer;
  list-style: none;
}

.shop-filter-group summary::-webkit-details-marker {
  display: none;
}

.shop-filter-group summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent-alt);
  border-bottom: 2px solid var(--accent-alt);
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--duration-normal) ease;
}

.shop-filter-group[open] summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.shop-filter-group[open] summary {
  border-bottom: 1px solid rgba(var(--color-neutral-300-rgb), 0.78);
  background: var(--color-white);
}

.filter-options {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-white);
}

fieldset {
  margin: var(--space-5) 0 0;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: var(--space-2);
  color: var(--accent-4);
  font-weight: var(--font-bold);
}

label { display: grid; gap: var(--space-2); color: var(--text-primary); font-size: var(--text-sm); }

.filters-panel label,
.radio-group label,
.checkbox-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.product-toolbar { margin-bottom: var(--space-5); }

.sort-control { display: flex; align-items: center; gap: var(--space-2); }

select,
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"] {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
}

small { color: var(--text-secondary); font-size: var(--text-xs); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-5);
}

.product-card {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform var(--duration-slow) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-slow) var(--ease-standard);
}

.product-media,
.gallery-main {
  min-height: 178px;
  background: var(--surface);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.media-shower,
.media-mirror,
.media-board,
.media-cover,
.media-antifog,
.media-table,
.media-kit {
  background-color: var(--surface);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.media-shower { background-image: url("../images/categories/showerdoors.png"); }
.media-mirror,
.media-antifog { background-image: url("../images/categories/espejos.png"); }
.media-board { background-image: url("../images/categories/pizarras.png"); }
.media-cover,
.media-table { background-image: url("../images/categories/cubiertas.png"); }
.media-kit { background-image: url("../images/home/glasstech-hero.png"); }

.product-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.product-body .btn,
.product-body .notify-form {
  margin-top: 0;
}

.product-body h3 {
  display: -webkit-box;
  align-self: start;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-body p {
  display: -webkit-box;
  align-self: start;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.badge-row { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-2); min-height: 20px; }
.product-card .badge-row { gap: var(--space-1); }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--badge-min-height);
  padding: var(--badge-padding-block) var(--badge-padding-inline);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: var(--badge-line-height);
}

.badge-measure { background: var(--surface); color: var(--accent-4); }
.badge-ready { background: var(--color-white); border: 1px solid var(--border); color: var(--accent-4); }
.badge-stock { background: var(--color-neutral-50); color: var(--accent); }
.badge-success { background: rgba(var(--color-success-600-rgb), 0.12); color: var(--success); }
.badge-warning { background: rgba(var(--color-orange-500-rgb), 0.14); color: var(--color-orange-700); }
.badge-danger { background: rgba(var(--color-danger-600-rgb), 0.12); color: var(--danger); }
.badge-promo { background: rgba(var(--color-danger-600-rgb), 0.10); color: var(--color-danger-700); }
.badge-commercial { border: 1px solid var(--accent-alt); background: var(--color-white); color: var(--accent-alt); }

.price-row {
  display: grid;
  gap: var(--space-1);
  margin-top: 0;
}

.price-row strong { font-size: var(--text-lg); }
.price-row span,
.sku { color: var(--text-secondary); font-size: var(--text-xs); }

.detail-grid,
.config-grid,
.checkout-grid,
.checkout-form-grid,
.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: var(--space-9);
  align-items: start;
}

.checkout-form-grid {
  grid-template-columns: minmax(0, 2fr) minmax(calc(var(--space-64) + var(--space-16)), 0.9fr);
  gap: var(--space-6);
}

.detail-grid.reverse { grid-template-columns: minmax(320px, 1fr) minmax(0, 0.9fr); }

.gallery-panel { overflow: hidden; }
.gallery-main { min-height: 420px; }

.thumb-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
}

.thumb-row span {
  display: block;
  min-height: 72px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.thumb-row span,
.mini-cart-thumb,
.cart-thumb,
.addon-thumb,
.cross-sell-thumb,
.pdp-gallery-main,
.pdp-gallery-thumbs span {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.detail-copy {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.breadcrumb { color: var(--accent); font-size: var(--text-xs); font-weight: var(--font-bold); }
.detail-price { margin: 0; color: var(--accent-4); font-size: var(--text-3xl); font-weight: var(--font-bold); }

.purchase-box,
.config-card,
.checkout-form,
.confirmation-card { display: grid; gap: var(--space-4); padding: var(--space-6); }

.delivery-note {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.measure-helper { padding: var(--space-6); }

.measure-diagram {
  position: relative;
  min-height: 360px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(var(--color-neutral-100-rgb), 0.75), rgba(var(--color-white-rgb), 0.95));
}

.measure-diagram::before,
.measure-diagram::after {
  content: "";
  position: absolute;
  background: var(--accent-alt);
}

.measure-diagram::before { left: 12%; right: 12%; bottom: 38px; height: 2px; }
.measure-diagram::after { top: 12%; bottom: 12%; right: 38px; width: 2px; }

.measure-width,
.measure-height {
  position: absolute;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.measure-width { left: 42%; bottom: 22px; }
.measure-height { right: 12px; top: 45%; transform: rotate(90deg); }

.check-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-3) 0 0;
  list-style: none;
}

.check-list li::before {
  content: "✓";
  margin-right: var(--space-2);
  color: var(--success);
  font-weight: var(--font-bold);
}

.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.summary-box {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.summary-box > strong { color: var(--accent-4); font-size: var(--text-base); }
.summary-box .summary-label { color: var(--accent); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; margin-bottom: var(--space-1); display: block; }
.summary-box p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }

.state-stack { display: grid; gap: var(--space-2); margin-top: var(--space-5); max-width: 300px; }
.state-pill { padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--font-bold); }
.state-pill.success { background: rgba(var(--color-success-600-rgb), 0.12); color: var(--success); }
.state-pill.warning { background: rgba(var(--color-orange-500-rgb), 0.14); color: var(--color-orange-700); }
.state-pill.danger { background: rgba(var(--color-danger-600-rgb), 0.12); color: var(--danger); }

.checkout-preview { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-md); }
.checkout-preview p { color: var(--text-secondary); }

.order-card { padding: var(--space-6); color: var(--text-primary); }
.order-line { padding: var(--space-3) 0; border-bottom: 1px solid var(--accent-3); }
.order-line.has-order-note { padding-bottom: var(--space-1); border-bottom: 0; }
.order-line.muted { color: var(--text-secondary); }
.order-note { color: var(--text-secondary); font-size: var(--text-sm); padding-bottom: var(--space-3); border-bottom: 1px solid var(--accent-3); }
.order-total { padding: var(--space-5) 0; font-size: var(--text-lg); }
.order-card .btn-block + .btn-block {
  margin-top: var(--space-3);
}

.order-card[data-cart-page-summary] {
  transition: none;
}

.order-card[data-cart-page-summary]:hover {
  transform: none;
  border-color: var(--accent-3);
  box-shadow: var(--shadow-1);
}

.confirmation-section .order-line,
.confirmation-section .order-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  align-items: center;
  column-gap: var(--space-5);
}

.confirmation-section .order-line {
  min-height: 48px;
  padding-block: var(--space-3);
}

.confirmation-section .order-note {
  display: flex;
  min-height: 42px;
  align-items: center;
  margin: 0;
  padding-block: var(--space-3);
  line-height: var(--leading-snug);
}

.confirmation-section .order-total {
  min-height: 60px;
  padding-block: var(--space-4);
}

.confirmation-section .order-line > span,
.confirmation-section .order-line > strong,
.confirmation-section .order-total > span,
.confirmation-section .order-total > strong {
  margin: 0;
  line-height: var(--leading-snug);
}

.confirmation-section .order-line > strong,
.confirmation-section .order-total > strong {
  justify-self: end;
  text-align: right;
}

@media (max-width: 520px) {
  .confirmation-section .order-line,
  .confirmation-section .order-total {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    column-gap: var(--space-3);
  }
}

.confirmation-card { align-self: stretch; }
.order-number { margin: 0; color: var(--accent-alt); font-size: var(--text-3xl); font-weight: var(--font-bold); }

.timeline {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
}

.timeline li.active { color: var(--success); font-weight: var(--font-bold); }

.orders-table { overflow: hidden; }
.orders-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--accent-3);
  align-items: center;
}

.orders-table .table-head {
  border-top: 0;
  background: var(--surface);
  color: var(--accent-4);
  font-weight: var(--font-bold);
}

.orders-table a { color: var(--accent-alt); font-weight: var(--font-bold); }



/* Footer ecommerce Glasstech — fondo claro alineado a glasstech.cl */
.site-footer {
  position: relative;
  padding: 0;
  background: var(--background-alt);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-alt);
}

.footer-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(140px, 0.75fr)) minmax(220px, 1fr);
  gap: var(--space-8);
  padding: var(--space-14) 0 var(--space-9);
}

.footer-brand-panel {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  max-width: 360px;
}

.footer-brand-panel img,
.footer-brand img {
  width: 188px;
  height: auto;
  filter: none;
}

.footer-brand-panel p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.footer-social a {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--text-heading);
  transition: transform var(--duration-normal) ease, background var(--duration-normal) ease, border-color var(--duration-normal) ease, color var(--duration-normal) ease;
}

.footer-social a:hover {
  transform: translateY(-2px);
  background: var(--accent-alt);
  border-color: var(--accent-alt);
  color: var(--text-on-accent-alt);
}

.footer-column,
.footer-contact {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.footer-column h2,
.footer-contact h2 {
  margin: 0 0 var(--space-2);
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.footer-column a,
.footer-contact a,
.footer-contact p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.footer-column a,
.footer-contact a {
  transition: color var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.footer-column a:hover,
.footer-contact a:hover {
  color: var(--accent-alt);
  transform: translateX(2px);
}

.footer-contact a,
.footer-contact p {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.footer-contact .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

.footer-corporate {
  width: max-content;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-alt);
  border-radius: var(--radius-sm);
  color: var(--accent-alt) !important;
  font-weight: var(--font-bold);
  background: var(--color-white);
}

.footer-corporate:hover {
  background: var(--accent-alt);
  color: var(--text-on-accent-alt) !important;
}

.footer-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.footer-trust-row > span {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 44px;
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.footer-trust-row .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-2xl);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) 0 var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.footer-bottom p {
  margin: 0;
  color: inherit;
}

.footer-bottom div {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.footer-bottom a:hover {
  color: var(--accent-alt);
}


@media (max-width: 980px) {
  .header-main,
  .hero-grid,
  .shop-layout,
  .shop-discovery-grid,
  .detail-grid,
  .detail-grid.reverse,
  .config-grid,
  .checkout-grid,
  .checkout-form-grid,
  .account-grid {
    grid-template-columns: 1fr;
  }

  .header-actions { justify-content: space-between; }
  .filters-panel { position: static; }
  .shop-search-spotlight {
    min-height: 0;
  }
  .category-grid,
  .product-grid { grid-template-columns: 1fr 1fr; }
  .product-toolbar { align-items: flex-start; flex-direction: column; }
  .gallery-main { min-height: 300px; }
  .footer-main { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-contact { grid-column: span 2; }
  .footer-trust-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 24px, var(--container)); }
  .top-strip { flex-direction: column; gap: var(--space-1); text-align: center; }
  .hero-section { padding-top: var(--space-10); }
  .hero-actions,
  .split-heading { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .two-cols,
  .category-grid,
  .product-grid,
  .hero-metrics { grid-template-columns: 1fr; }
  .shop-discovery {
    margin-bottom: var(--space-4);
    padding-bottom: 0;
  }
  .shop-search-spotlight {
    padding: var(--space-6);
  }
  .shop-search-spotlight h2 {
    font-size: var(--text-3xl);
  }
  .orders-table > div { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-11); }
  .footer-brand-panel { max-width: none; }
  .footer-contact { grid-column: auto; }
  .footer-trust-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .header-main { gap: var(--space-4); }
  .search-form { grid-template-columns: 1fr; border-radius: var(--radius-md); }
  .search-form button { min-height: 42px; }
}


/* Navegación multipágina */
.category-nav-inner a.is-active {
  color: var(--accent-alt);
}

.page-hero {
  background: linear-gradient(90deg, var(--background-alt), var(--color-white));
  padding: var(--space-13) 0 var(--space-9);
}

.page-hero.compact p:not(.eyebrow),
.hero-copy p,
.detail-copy > p,
.account-grid > div > p {
  max-width: 720px;
}

.breadcrumb a,
.cart-item a,
.account-panel a {
  color: var(--accent-alt);
  font-weight: var(--font-bold);
}

.featured-section,
.related-section,
.cart-section,
.confirmation-section {
  padding: var(--space-14) 0;
}

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

.benefit-section {
  padding: var(--space-11) 0 var(--space-14);
  background: var(--background-alt);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.benefit-grid > div,
.account-panel,
.cart-item {
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.benefit-grid > div {
  padding: var(--space-5);
}

.benefit-grid p,
.account-panel span,
.cart-item p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.subcategory-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.category-section.slim {
  padding: var(--space-6) 0;
}

.subcategory-chip,
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.subcategory-chip.is-active,
.pagination .is-current {
  border-color: var(--accent-alt);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--color-orange-700);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6);
  align-items: start;
}

.cart-items {
  display: grid;
  gap: var(--space-4);
}

.cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}

.cart-item h3 {
  font-size: var(--text-lg);
}

.cart-linked-additional {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--accent-3);
}

.cart-linked-additional-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-round);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

.cart-linked-additional-copy,
.cart-linked-additional-actions {
  display: grid;
  gap: var(--space-1);
}

.cart-linked-additional-copy small,
.checkout-order-additional small,
.mini-cart-linked-additional small,
.order-line-additional small {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.cart-linked-additional-copy > span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.cart-linked-additional-actions {
  justify-items: end;
}

.cart-thumb {
  width: 96px;
  height: 76px;
  border-radius: var(--radius-sm);
}

.cross-sell-section {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.cross-sell-section h2 {
  margin: 0 0 var(--space-3);
  color: var(--text-heading);
  font-size: var(--text-xl);
}

.cross-sell-grid {
  display: grid;
  gap: var(--space-3);
}

.cross-sell-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 74px;
  padding: var(--space-3);
  border: 1px solid rgba(var(--color-neutral-300-rgb), 0.78);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
}

.cross-sell-thumb {
  width: 58px;
  height: 54px;
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cross-sell-copy {
  min-width: 0;
}

.cross-sell-card h3 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  text-wrap: pretty;
}

.cross-sell-action {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.cross-sell-action strong {
  color: var(--text-heading);
  font-size: var(--text-base);
}

.cross-sell-action .btn {
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.checkout-summary {
  display: grid;
  gap: 0;
}

.checkout-summary > h3 {
  margin: 0 0 var(--space-3);
  color: var(--text-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-title);
}

.woo-notice {
  --alert-background: var(--feedback-info-background);
  --alert-border-color: var(--feedback-info-border);
  --alert-icon-color: var(--feedback-info-icon);
  display: grid;
  grid-template-columns: var(--alert-icon-size) minmax(0, 1fr) auto;
  gap: var(--alert-content-gap);
  align-items: start;
  min-height: var(--alert-min-height);
  margin-bottom: var(--space-4);
  padding: var(--alert-padding-block) var(--alert-padding-inline);
  border: var(--alert-border-width) solid var(--alert-border-color);
  border-radius: var(--alert-radius);
  background: var(--alert-background);
  color: var(--text-primary);
  font-size: var(--alert-font-size);
  line-height: var(--alert-line-height);
}

.woo-notice p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.woo-notice a:not(.btn) {
  color: var(--accent-alt);
  font-weight: var(--font-bold);
}

.woo-notice .material-symbols-outlined {
  color: var(--alert-icon-color);
  font-size: var(--alert-icon-size);
  line-height: var(--leading-none);
}

.woo-notice-success {
  --alert-background: var(--feedback-success-background);
  --alert-border-color: var(--feedback-success-border);
  --alert-icon-color: var(--feedback-success-icon);
}

.woo-notice-warning {
  --alert-background: var(--feedback-warning-background);
  --alert-border-color: var(--feedback-warning-border);
  --alert-icon-color: var(--feedback-warning-icon);
}

.woo-notice-error {
  --alert-background: var(--feedback-error-background);
  --alert-border-color: var(--feedback-error-border);
  --alert-icon-color: var(--feedback-error-icon);
}

.cart-live-notice {
  width: min(100% - 32px, var(--container));
  margin: var(--space-4) auto 0;
}

.coupon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  max-width: 560px;
  margin-bottom: var(--space-6);
}

.checkout-order-items {
  display: grid;
  gap: var(--space-3);
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.checkout-summary .order-line {
  padding: var(--space-2) 0;
}

.checkout-summary .order-total {
  margin-top: var(--space-3);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--accent-3);
  color: var(--text-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.checkout-summary .order-total strong {
  color: var(--accent-4);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}

.checkout-order-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.checkout-order-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background-position: center;
  background-size: cover;
}

.checkout-order-item p,
.checkout-order-item small {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.checkout-order-item > strong:last-child { white-space: nowrap; font-size: var(--text-sm); }
.checkout-order-group { display: grid; gap: var(--space-3); }
.checkout-order-additional {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  margin-left: var(--space-16);
  padding-top: var(--space-3);
  border-top: 1px solid var(--accent-3);
}
.checkout-order-additional > .material-symbols-outlined { color: var(--accent-alt); font-size: var(--text-xl); }
.checkout-order-additional > div { display: grid; gap: var(--space-1); }
.checkout-order-additional > div > strong { font-size: var(--text-xs); line-height: var(--leading-snug); }
.checkout-order-additional > div > span { color: var(--text-secondary); font-size: var(--text-xs); }
.checkout-order-additional > strong:last-child { white-space: nowrap; font-size: var(--text-xs); }
.order-line-additional { background: var(--background-alt); }
.order-line-additional > span { display: grid; gap: var(--space-1); }
.checkout-discount-line strong { color: var(--success); }

.coupon-feedback {
  grid-column: 1 / -1;
  min-height: 20px;
  margin: 0;
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.product-info-section {
  padding: 0 0 var(--space-14);
}

.product-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr) minmax(220px, 0.8fr);
  gap: var(--space-5);
}

.product-info-panel {
  padding: var(--space-6);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.product-info-panel h2 {
  font-size: var(--text-2xl);
}

.product-info-panel p {
  color: var(--text-secondary);
}

.spec-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

.spec-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--accent-3);
}

.spec-list dt {
  color: var(--accent);
  font-weight: var(--font-bold);
}

.spec-list dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--font-bold);
}

.checkout-notices {
  margin-bottom: var(--space-5);
}

.checkout-choice-grid {
  display: grid;
  gap: var(--space-3);
}

.checkout-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
}

.checkout-choice small {
  display: block;
  margin-top: var(--space-1);
}

.checkout-payment-option {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.checkout-webpay-logo {
  display: block;
  width: min(180px, 100%);
  height: auto;
}

.product-validation-notice {
  width: min(100% - 32px, var(--container));
  margin: var(--space-4) auto 0;
}

.configurator-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.configurator-steps span {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  box-shadow: var(--shadow-1);
}

.configurator-steps strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent-4);
  font-size: var(--text-xs);
}

.configurator-steps .is-active {
  border-color: rgba(var(--color-orange-500-rgb), 0.55);
  color: var(--accent-4);
}

.configurator-steps .is-active strong {
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
}

.field-hint {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--color-orange-700);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.field-hint .material-symbols-outlined {
  font-size: var(--text-xl);
}

.configurator-summary {
  border: 1px solid rgba(var(--color-orange-500-rgb), 0.35);
  background: var(--color-orange-50);
}

.active-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  padding: var(--space-3);
  border: 1px solid rgba(var(--color-neutral-300-rgb), 0.76);
  border-radius: var(--radius-md);
  background: var(--color-neutral-50);
}

.active-filter-row span,
.active-filter-row a,
.active-filter-row button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.active-filter-row span {
  border: 1px solid rgba(var(--color-blue-500-rgb), 0.18);
  background: var(--color-white);
  color: var(--accent-4);
  box-shadow: var(--elevation-card);
}

.active-filter-row a,
.active-filter-row button {
  border: 1px solid rgba(var(--color-orange-500-rgb), 0.24);
  background: rgba(var(--color-orange-500-rgb), 0.10);
  color: var(--accent-alt);
  cursor: pointer;
}

.active-filter-row:empty {
  display: none;
}

.archive-empty-state {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px dashed var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.archive-empty-state .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
}

.archive-empty-state h2 {
  font-size: var(--text-2xl);
}

.archive-empty-state p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.account-panel {
  display: grid;
  gap: var(--space-2);
  max-width: 380px;
  margin-top: var(--space-5);
  padding: var(--space-5);
}

.confirmation-section {
  background: var(--background-alt);
}

.confirmation-card h1,
.checkout-form h1,
.account-section h1,
.detail-copy h1,
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-7xl));
  line-height: var(--leading-display);
  margin: 0;
}

.checkout-form .breadcrumb,
.confirmation-card .breadcrumb,
.account-section .breadcrumb {
  margin-bottom: var(--space-1);
}

.product-media {
  display: block;
}

@media (max-width: 980px) {
  .compact-grid,
  .benefit-grid,
  .cart-grid,
  .product-info-grid,
  .configurator-steps {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .cart-item > strong {
    grid-column: 2;
  }

  .cross-sell-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .cross-sell-action {
    grid-column: 2;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .page-hero { padding: var(--space-9) 0 var(--space-7); }
  .section-breadcrumb { padding-top: var(--space-3); }
  .image-hero { min-height: 280px; margin-top: var(--space-2); padding: var(--space-11) 0; }
  .image-hero::after { background: linear-gradient(90deg, rgba(var(--color-navy-900-rgb), 0.92), rgba(var(--color-navy-900-rgb), 0.68)); }
  .cart-item { grid-template-columns: 1fr; }
  .cart-thumb { width: 100%; height: 120px; }
  .cart-item > strong { grid-column: auto; }
  .cross-sell-section { padding: var(--space-4); }
  .cross-sell-card { grid-template-columns: 48px minmax(0, 1fr); }
  .cross-sell-thumb { width: 48px; height: 48px; }
  .cross-sell-action { grid-column: 1 / -1; }
  .cross-sell-action .btn { flex: 1; }
  .woo-notice,
  .coupon-row,
  .archive-empty-state { grid-template-columns: 1fr; }
  .woo-notice .material-symbols-outlined { display: none; }
  .archive-empty-state .btn { width: 100%; }
}




/* Heroes interiores con imagen de categoria */
.section-breadcrumb {
  padding: var(--space-5) 0 var(--space-2);
  background: var(--color-white);
}

main: has(> .account-section) > .section-breadcrumb,
main:has(> .confirmation-section) > .section-breadcrumb,
main:has(> .detail-section.alt) > .section-breadcrumb {
  background: var(--background-alt);
}

.section-breadcrumb .breadcrumb {
  display: block;
  padding: 0;
  line-height: var(--leading-body);
}

.image-hero {
  position: relative;
  isolation: isolate;
  min-height: 470px;
  display: grid;
  align-items: center;
  margin-top: 0;
  padding: var(--space-43) 0 var(--space-21);
  overflow: hidden;
  background-color: var(--surface);
  background-position: center;
  background-size: cover;
}

.image-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  background: inherit;
  transform: scale(1.02);
  animation: sectionHeroZoom 18s ease-in-out infinite alternate;
}

.image-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-underlay);
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.55) 0%, rgba(var(--color-black-rgb), 0.35) 46%, rgba(var(--color-black-rgb), 0.12) 100%);
}

.section-hero-content {
  display: grid;
  gap: var(--heading-subtitle-gap);
  color: var(--color-white);
}

.section-hero-content .eyebrow {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: clamp(var(--text-xs), 1vw, var(--text-sm));
  font-weight: var(--font-extrabold);
  line-height: var(--leading-display);
  text-transform: uppercase;
  text-shadow: none;
}

.section-hero-content h1 {
  max-width: 720px;
  color: var(--color-white);
  text-shadow: 0 16px 36px rgba(var(--color-black-rgb), 0.26);
}

.section-hero-content p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  color: rgba(var(--color-white-rgb), 0.88);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
}

.shop-hero,
.store-hero {
  background-image: url("../images/home/glasstech-hero.png");
  min-height: 760px;
  padding: var(--space-39) 0 var(--space-20);
}

.solutions-hero {
  background-image: url("../images/categories/cubiertas.png");
  background-position: center right;
}

.services-hero {
  background-image: url("../images/categories/showerdoors.png");
  background-position: center right;
}

.quote-hero {
  background-image: url("../images/categories/espejos.png");
  background-position: center;
}

.contact-hero {
  background-image: url("../images/home/glasstech-hero.png");
  background-position: center top;
}

.showerdoors-hero {
  background-image: url("../images/categories/showerdoors.png");
  background-position: center right;
}

.mirrors-hero {
  background-image: url("../images/categories/espejos.png");
  background-position: center;
}

.covers-hero {
  background-image: url("../images/categories/cubiertas.png");
  background-position: center right;
}

.hardware-hero {
  background-image: url("../images/home/glasstech-hero.png");
  background-position: center bottom;
}

.boards-hero {
  background-image: url("../images/categories/pizarras.png");
  background-position: center right;
}

.outlet-hero {
  background-image: url("../images/categories/cubiertas.png");
  background-position: center left;
}

.category-archive-hero,
.cart-hero {
  background-image: url("../images/categories/showerdoors.png");
  background-position: center right;
}

.help-hero {
  background-image: url("../images/categories/cubiertas.png");
}

.product-shower-hero {
  background-image: url("../images/categories/showerdoors.png");
  background-position: center right;
}

.product-mirror-hero,
.account-hero {
  background-image: url("../images/categories/espejos.png");
}

.checkout-hero {
  background-image: url("../images/home/glasstech-hero.png");
}

@keyframes sectionHeroZoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.07); }
}


/* Header y Hero premium */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  background: rgba(var(--color-white-rgb), 0.98);
  border-bottom: 1px solid rgba(var(--color-neutral-300-rgb), 0.86);
  box-shadow: var(--elevation-subtle);
  transition: background var(--duration-slow) ease, box-shadow var(--duration-slow) ease, border-color var(--duration-slow) ease, color var(--duration-slow) ease;
}

.has-transparent-header .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(var(--color-black-rgb), 0.55), rgba(var(--color-black-rgb), 0.08));
  border-bottom-color: rgba(var(--color-white-rgb), 0.16);
  box-shadow: none;
  color: var(--color-white);
}

.has-transparent-header .site-header.is-scrolled {
  background: rgba(var(--color-white-rgb), 0.98);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 18px rgba(var(--color-black-rgb), 0.08);
  color: var(--text-primary);
}

.has-transparent-header .top-strip {
  background: transparent;
  color: inherit;
  border-bottom: 1px solid rgba(var(--color-white-rgb), 0.16);
  transition: border-color var(--duration-slow) ease, color var(--duration-slow) ease;
}

.has-transparent-header .site-header.is-scrolled .top-strip {
  color: var(--text-secondary);
  background: var(--color-white);
  border-bottom: 1px solid var(--border);
}

.header-main {
  grid-template-columns: minmax(160px, 250px) minmax(320px, 1fr) minmax(190px, 250px);
  padding: var(--space-4) 0;
}

.brand-logo img {
  width: min(218px, 42vw);
  transition: width var(--duration-slow) ease, filter var(--duration-slow) ease, opacity var(--duration-slow) ease;
}

.has-transparent-header .brand-logo {
  position: relative;
}

.has-transparent-header .brand-logo img {
  filter: drop-shadow(0 2px 5px rgba(var(--color-black-rgb), 0.5));
}

.has-transparent-header .brand-logo-white {
  position: absolute;
  inset: 0;
  opacity: 1;
}

.has-transparent-header .brand-logo-blue {
  opacity: 0;
}

.has-transparent-header .site-header.is-scrolled .brand-logo-white {
  opacity: 0;
}

.has-transparent-header .site-header.is-scrolled .brand-logo-blue {
  opacity: 1;
}

.has-transparent-header .site-header.is-scrolled .brand-logo img {
  width: min(198px, 42vw);
  filter: none;
}

.brand-subtitle { display: none; }

.header-nav {
  border-top: 0;
  justify-self: center;
  min-width: 0;
}

.header-nav .category-nav-inner {
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-4), 2.4vw, var(--space-8));
  overflow: visible;
  padding: 0;
  color: inherit;
}

.category-nav-inner a {
  position: relative;
  opacity: 0.92;
  transition: color var(--duration-normal) ease, opacity var(--duration-normal) ease;
}

.category-nav-inner a:hover,
.category-nav-inner a.is-active {
  color: var(--accent-alt);
  opacity: 1;
}

.mega-menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.mega-menu-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  min-height: 0;
  line-height: inherit;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--z-popover);
  width: min(820px, calc(100vw - 36px));
  padding-top: var(--space-7);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease, visibility 0s linear var(--duration-normal);
  visibility: hidden;
}

.mega-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
}

.mega-menu-item:hover .mega-menu,
.mega-menu-item:focus-within .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
  visibility: visible;
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(260px, 0.9fr);
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid rgba(var(--color-neutral-300-rgb), 0.78);
  border-radius: var(--radius-md);
  background: rgba(var(--color-white-rgb), 0.98);
  color: var(--text-primary);
  box-shadow: 0 22px 60px rgba(var(--color-navy-900-rgb), 0.18);
  backdrop-filter: blur(12px);
}

.mega-menu-column {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.mega-menu-column span {
  margin-bottom: var(--space-2);
  color: var(--accent-4);
  font-size: var(--text-xs);
  font-weight: var(--font-extrabold);
  text-transform: uppercase;
}

.mega-menu-column a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  opacity: 1;
}

.mega-menu-column a:hover {
  background: rgba(var(--color-orange-500-rgb), 0.10);
  color: var(--accent-alt);
}

.mega-menu-feature {
  display: grid;
  gap: var(--space-3);
  align-content: end;
  min-height: 210px;
  padding: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(var(--color-navy-900-rgb), 0.18), rgba(var(--color-navy-900-rgb), 0.76)),
    url("../images/categories/showerdoors.png");
  background-position: center;
  background-size: cover;
  color: var(--color-white);
}

.mega-menu-feature strong {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}

.mega-menu-feature p {
  margin: 0;
  color: rgba(var(--color-white-rgb), 0.88);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.mega-menu-feature .btn {
  width: max-content;
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
}

.header-actions {
  justify-content: flex-end;
  color: inherit;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
}

.material-symbols-outlined {
  font-size: var(--text-2xl);
  line-height: var(--leading-none);
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.cart-link em {
  display: inline-grid;
  place-items: center;
  min-width: var(--header-cart-count-size);
  height: var(--header-cart-count-size);
  padding-inline: var(--header-cart-count-padding-inline);
  margin-left: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: var(--header-cart-count-font-size);
  font-style: normal;
  font-weight: var(--font-bold);
  line-height: var(--header-cart-count-line-height);
}

.cart-link span:not(.material-symbols-outlined) {
  margin: 0;
}

.hero-section.hero-slider {
  position: relative;
  min-height: 760px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--color-white);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: var(--z-content);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  animation: heroKenBurns 18s ease-in-out infinite alternate;
}

.hero-slide:not(.is-active) .hero-bg {
  animation-play-state: paused;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.55) 0%, rgba(var(--color-black-rgb), 0.32) 45%, rgba(var(--color-black-rgb), 0.12) 100%);
}

.hero-content {
  position: relative;
  z-index: var(--z-control);
  display: grid;
  align-content: center;
  min-height: 760px;
  padding-top: var(--space-30);
  padding-bottom: var(--space-18);
}

.hero-content .eyebrow {
  color: var(--color-orange-200);
}

.hero-content h1,
.hero-content h2 {
  max-width: 720px;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 7vw, var(--text-9xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
}

.hero-content p:not(.eyebrow) {
  max-width: 610px;
  margin: var(--space-5) 0 0;
  color: rgba(var(--color-white-rgb), 0.88);
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
}

.hero-content .hero-actions {
  margin-top: var(--space-7);
}

.btn-ghost {
  border-color: rgba(var(--color-white-rgb), 0.72);
  background: rgba(var(--color-white-rgb), 0.08);
  color: var(--color-white);
}

.btn-ghost:hover {
  background: rgba(var(--color-white-rgb), 0.18);
}

.hero-dots {
  position: absolute;
  z-index: var(--z-floating);
  left: 50%;
  bottom: 28px;
  display: flex;
  gap: var(--space-3);
  transform: translateX(-50%);
}

.hero-dots button {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-white-rgb), 0.45);
  cursor: pointer;
  transition: width var(--duration-normal) ease, background var(--duration-normal) ease;
}

.hero-dots button.is-active {
  width: 48px;
  background: var(--accent-alt);
}

@keyframes heroKenBurns {
  from { transform: scale(1.02); }
  to { transform: scale(1.10); }
}

@media (max-width: 980px) {
  .header-main {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .brand-logo,
  .header-actions,
  .header-nav {
    justify-self: stretch;
  }

  .header-nav .category-nav-inner {
    justify-content: flex-start;
    overflow: visible;
  }

  .header-actions {
    justify-content: space-between;
  }

  .hero-section.hero-slider,
  .hero-content {
    min-height: 720px;
  }
}

@media (max-width: 640px) {
  .has-transparent-header .site-header {
    background: rgba(var(--color-black-rgb), 0.72);
  }

  .top-strip {
    display: none;
  }

  .hero-section.hero-slider,
  .hero-content {
    min-height: 680px;
  }

  .hero-content {
    padding-top: var(--space-53);
  }

  .hero-content h1,
  .hero-content h2 {
    font-size: clamp(var(--text-5xl), 12vw, var(--text-7xl));
  }

  .icon-link span:not(.material-symbols-outlined) {
    display: none;
  }
}


/* Ajuste iconos Material en acciones del header */
.cart-link .material-symbols-outlined,
.account-link .material-symbols-outlined {
  display: inline-block;
  min-width: auto;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: var(--text-2xl);
}

.cart-link span:not(.material-symbols-outlined),
.account-link span:not(.material-symbols-outlined) {
  display: inline;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: var(--text-sm);
}


/* Categorías con imagen */
.category-card-image {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  align-content: end;
  padding: var(--space-6);
  color: var(--color-white);
  isolation: isolate;
}

.category-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-underlay);
  background: linear-gradient(180deg, rgba(var(--color-black-rgb), 0.05) 10%, rgba(var(--color-black-rgb), 0.62) 100%);
}

.category-card-image img {
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform var(--duration-slow) ease;
}

.category-card-image:hover img {
  transform: scale(1.06);
}

.category-card-image .category-icon {
  background: rgba(var(--color-white-rgb), 0.92);
  color: var(--accent-4);
}

.category-card-image h3,
.category-card-image p {
  color: var(--color-white);
  text-shadow: 0 1px 8px rgba(var(--color-navy-900-rgb), 0.35);
}

.category-card-image p {
  max-width: 92%;
  margin: 0;
}

.archive-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: var(--space-8);
  align-items: center;
}

.archive-hero-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-3);
  box-shadow: var(--shadow-1);
}

@media (max-width: 980px) {
  .category-card-image {
    min-height: 320px;
  }

  .archive-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .category-card-image {
    min-height: 280px;
  }
}


/* Carrito off-canvas por clic */
.cart-drawer {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cart-drawer .cart-link {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.mini-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-fixed);
  border: 0;
  background: rgba(var(--color-black-rgb), 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) ease;
}

.cart-drawer.is-open .mini-cart-overlay {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer .mini-cart {
  left: auto;
  right: 0;
  transform: translateX(104%);
  opacity: 1;
  pointer-events: none;
  transition: transform var(--duration-slow) ease;
}

.cart-drawer.is-open .mini-cart {
  transform: translateX(0);
  pointer-events: auto;
}

.cart-drawer-open {
  overflow: hidden;
}

.mini-cart-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--accent-4);
  cursor: pointer;
  transition: border-color var(--duration-normal) ease, color var(--duration-normal) ease, background var(--duration-normal) ease;
}

.mini-cart-close:hover {
  border-color: var(--accent-alt);
  color: var(--accent-alt);
  background: rgba(var(--color-orange-500-rgb), 0.08);
}

.mini-cart-close .material-symbols-outlined {
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  font-size: var(--text-2xl);
}

@media (max-width: 640px) {
  .cart-drawer .mini-cart {
    width: min(370px, 100vw);
  }
}


/* Corrección layout drawer carrito */
.cart-drawer {
  position: static;
}

.cart-drawer .mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: var(--z-overlay);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--space-5);
  width: min(390px, calc(100vw - 24px));
  height: 100vh;
  padding: var(--space-6);
  border: 0;
  border-radius: 0;
  background: var(--color-white);
  color: var(--text-primary);
  box-shadow: -12px 0 34px rgba(var(--color-navy-900-rgb), 0.22);
  transform: translateX(104%);
  opacity: 1;
  pointer-events: none;
  transition: transform var(--duration-slow) ease;
}

.cart-drawer.is-open .mini-cart {
  transform: translateX(0);
  pointer-events: auto;
}

.mini-cart-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--accent-3);
}

.mini-cart-header h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
}

.mini-cart-items {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  overflow-y: auto;
  padding-right: var(--space-1);
}

.mini-cart-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--background-alt);
}

.mini-cart-thumb {
  width: 82px;
  min-height: 82px;
  border-radius: var(--radius-sm);
}

.mini-cart-item h3 {
  font-size: var(--text-base);
  line-height: var(--leading-heading);
}

.mini-cart-item p {
  margin: var(--space-2) 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.mini-cart-item strong {
  color: var(--accent-4);
  font-size: var(--text-sm);
}

.mini-cart-linked-additional {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--accent-3);
}

.mini-cart-linked-additional > .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

.mini-cart-linked-additional > span strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.mini-cart-linked-additional > strong:last-child {
  white-space: nowrap;
  font-size: var(--text-xs);
}

.mini-cart-summary {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--accent-3);
}

.mini-cart-summary div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.mini-cart-summary strong {
  color: var(--text-primary);
}

.mini-cart-summary .mini-cart-total {
  color: var(--accent-4);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.mini-cart-actions {
  display: grid;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .cart-drawer .mini-cart {
    width: min(370px, 100vw);
    padding: var(--space-5);
  }

  .mini-cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .mini-cart-thumb {
    width: 72px;
    min-height: 72px;
  }
}


/* Refinamiento Home */
.home-proof-strip {
  position: relative;
  z-index: var(--z-control);
  margin-top: calc(-1 * var(--space-11));
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 12px 30px rgba(var(--color-navy-900-rgb), 0.12);
  overflow: hidden;
}

.proof-grid > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-5) var(--space-5);
  border-right: 1px solid var(--accent-3);
}

.proof-grid > div:last-child {
  border-right: 0;
}

.proof-grid .material-symbols-outlined {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
}

.proof-grid strong {
  color: var(--accent-4);
}

.proof-grid p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.home-categories {
  padding-top: var(--space-18);
}

.home-featured {
  background: var(--background-alt);
}

.product-card-emphasis {
  border-color: rgba(var(--color-orange-500-rgb), 0.55);
}

.home-configurator-band {
  padding: var(--space-16) 0;
  background: var(--surface);
  color: var(--text-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.configurator-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: var(--space-9);
  align-items: center;
}

.home-configurator-band h2 {
  max-width: 780px;
  color: var(--text-heading);
}

.home-configurator-band p:not(.eyebrow) {
  max-width: 620px;
  color: var(--text-secondary);
}

.configurator-preview {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.configurator-preview span,
.configurator-preview strong {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  color: var(--text-primary);
}

.configurator-preview strong {
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: var(--text-lg);
}

.home-next-steps {
  background: var(--color-white);
}

@media (max-width: 980px) {
  .home-proof-strip {
    margin-top: 0;
    padding-top: var(--space-5);
  }

  .proof-grid,
  .configurator-band-grid {
    grid-template-columns: 1fr;
  }

  .proof-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--accent-3);
  }

  .proof-grid > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  .home-categories {
    padding-top: var(--space-13);
  }

  .proof-grid > div {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: var(--space-4);
  }

  .home-configurator-band {
    padding: var(--space-12) 0;
  }
}


/* Carrito interactivo mínimo */
.cart-qty-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.cart-qty-control button,
.cart-remove,
.cart-clear {
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--accent-4);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  cursor: pointer;
}

.cart-qty-control button {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--space-2);
}

.cart-qty-control span {
  min-width: 24px;
  text-align: center;
  font-weight: var(--font-bold);
}

.cart-remove {
  padding: var(--space-2) var(--space-2);
  color: var(--danger);
}

.cart-page-actions {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
}

.cart-clear {
  justify-self: center;
  margin-top: var(--space-2);
  padding: var(--control-padding-block) var(--control-padding-inline);
  color: var(--danger);
}

.cart-summary-clear {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--accent-3);
  text-align: center;
}

.cart-summary-clear .cart-clear {
  margin: 0;
  padding: var(--space-2) var(--space-2);
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.cart-summary-clear .cart-clear:hover {
  color: var(--text-primary);
  text-decoration-color: currentColor;
}

.cart-summary-clear .cart-clear:focus-visible {
  outline: 2px solid var(--accent-alt);
  outline-offset: 3px;
}

.cart-empty-state {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-6);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-1);
}

.mini-cart .cart-empty-state {
  box-shadow: none;
}

.cart-empty-state .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent-4);
}

.cart-empty-state p {
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 980px) {
  .cart-page-actions {
    grid-column: 2;
    justify-items: start;
  }

  .cart-linked-additional {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .cart-page-actions {
    grid-column: auto;
  }

  .cart-linked-additional {
    grid-column: auto;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .cart-linked-additional-actions {
    grid-column: 2;
    justify-items: start;
  }

  .checkout-order-additional {
    margin-left: 0;
  }
}


/* Ajuste final: aviso superior no persistente */
.site-header.is-scrolled .top-strip,
.has-transparent-header .site-header.is-scrolled .top-strip {
  display: flex;
  max-height: 0;
  min-height: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

body:not(.has-transparent-header) .site-header:not(.is-scrolled) .top-strip {
  max-height: 34px;
  opacity: 1;
}


@media (max-width: 640px) {
  .section-breadcrumb { padding: var(--space-4) 0 var(--space-2); }
  .section-breadcrumb .breadcrumb { font-size: var(--text-xs); }
  .image-hero { min-height: 420px; margin-top: 0; padding: var(--space-48) 0 var(--space-14); }
  .image-hero::after { background: linear-gradient(90deg, rgba(var(--color-navy-900-rgb), 0.92), rgba(var(--color-navy-900-rgb), 0.68)); }
  .section-hero-content p:not(.eyebrow) { font-size: var(--text-base); }
}


/* Mi cuenta estilo WooCommerce */
.account-heading {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.account-heading p:not(.eyebrow) {
  max-width: none;
  margin: 0;
  color: var(--text-secondary);
}

.account-dashboard {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.account-menu,
.account-welcome,
.account-summary-grid > div,
.account-block {
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.account-menu {
  position: sticky;
  top: 128px;
  overflow: hidden;
}

.account-user {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--background-alt);
  color: var(--text-heading);
}

.account-user .material-symbols-outlined {
  font-size: var(--text-5xl);
  color: var(--accent-alt);
}

.account-user small {
  color: var(--text-secondary);
}

.account-menu nav {
  display: grid;
}

.account-menu nav a {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--accent-3);
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.account-menu nav a:last-child {
  border-bottom: 0;
}

.account-menu nav a:hover,
.account-menu nav a.is-active {
  background: rgba(var(--color-orange-500-rgb), 0.10);
  color: var(--accent-alt);
}

.account-main {
  display: grid;
  gap: var(--space-5);
}

.account-welcome {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6);
}

.account-welcome .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.account-welcome h2,
.account-block h2 {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
}

.account-welcome p:not(.eyebrow) {
  max-width: 680px;
  margin: var(--space-3) 0 0;
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.account-summary-grid > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-5);
}

.account-summary-grid .material-symbols-outlined {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
}

.account-summary-grid .status-review .material-symbols-outlined {
  background: rgba(var(--color-warning-400-rgb), 0.16);
  color: var(--color-warning-700);
}

.account-summary-grid .status-complete .material-symbols-outlined {
  background: rgba(var(--color-success-600-rgb), 0.14);
  color: var(--success);
}

.account-summary-grid .status-zone .material-symbols-outlined {
  background: rgba(var(--color-bluegray-700-rgb), 0.13);
  color: var(--accent);
}

.account-summary-grid strong {
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-none);
}

.account-summary-grid p {
  margin: 0;
  font-size: var(--text-sm);
}

.account-block {
  padding: var(--space-6);
}

.account-block-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-4);
}

.account-block-header .btn {
  flex: 0 0 auto;
}

.account-block-intro {
  max-width: 62ch;
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.account-address-summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-top: var(--space-5);
  border-top: 1px solid var(--accent-3);
}

.account-address-summary > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-bluegray-700-rgb), 0.12);
  color: var(--accent);
}

.account-address-summary address {
  color: var(--text-primary);
}

.account-details-list-spacious {
  gap: 0;
  padding-top: var(--space-1);
}

.account-details-list-spacious div {
  min-height: 52px;
  align-items: center;
  padding: var(--space-4) 0;
}

.account-orders-table > div {
  grid-template-columns: 1fr 0.9fr 1fr 0.9fr auto;
}

.account-two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.account-block address {
  color: var(--text-secondary);
  font-style: normal;
  line-height: var(--leading-loose);
}

.account-details-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.account-details-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--accent-3);
}

.account-details-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.account-details-list dt {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.account-details-list dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-align: right;
}

.account-edit-form {
  display: grid;
  gap: var(--space-4);
}

.account-edit-form label {
  gap: var(--space-2);
  font-weight: var(--font-bold);
}

.account-edit-form input,
.account-edit-form select {
  margin-top: var(--space-1);
  font-weight: var(--font-medium);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

@media (max-width: 980px) {
  .account-dashboard,
  .account-summary-grid,
  .account-two-cols {
    grid-template-columns: 1fr;
  }

  .account-menu {
    position: static;
  }

  .account-menu nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-welcome {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .account-menu nav {
    grid-template-columns: 1fr;
  }

  .account-block-header,
  .account-details-list div {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-details-list dd {
    text-align: left;
  }

  .account-block-header .btn {
    width: 100%;
  }
}


/* ============================================================
   Componentes de conversión (rating, testimonios, trust, faq, etc.)
   Todos los tokens vienen del :root; no se introducen colores nuevos.
   ============================================================ */

/* Search form dentro del header */
.header-search {
  grid-column: 1 / -1;
  padding: 0 0 var(--space-3);
}

.header-search .search-form {
  max-width: 640px;
  margin-inline: auto;
}

.header-search input::placeholder {
  color: var(--text-secondary);
}

.has-transparent-header .site-header:not(.is-scrolled) .header-search .search-form {
  border-color: rgba(var(--color-white-rgb), 0.4);
  background: rgba(var(--color-white-rgb), 0.94);
}

/* Ratings */
.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.rating-stars .stars {
  color: var(--color-warning-500);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  line-height: var(--leading-none);
}

.rating-stars a,
.rating-stars .review-count {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.rating-stars a { color: var(--accent-alt); }

.product-body .rating-stars {
  font-size: var(--text-xs);
}

/* Cuotas / installments bajo precio */
.price-installments {
  margin: var(--space-1) 0 0;
  color: var(--success);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.price-installments small {
  display: block;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
}

/* Trust badges dentro de purchase box y checkout */
.trust-badge-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
}

.trust-badge {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  text-align: center;
  color: var(--accent-4);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.trust-badge .material-symbols-outlined {
  justify-self: center;
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

.trust-badge small {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  font-size: var(--text-2xs);
}

/* Barra de envío gratis */
.free-shipping-bar {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(var(--color-success-600-rgb), 0.08), rgba(var(--color-success-600-rgb), 0.02));
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.free-shipping-bar strong {
  color: var(--accent-4);
}

.free-shipping-bar.is-reached {
  background: rgba(var(--color-success-600-rgb), 0.12);
  border-color: rgba(var(--color-success-600-rgb), 0.4);
}

.free-shipping-bar.is-reached strong {
  color: var(--success);
}

.free-shipping-progress {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow: hidden;
  position: relative;
}

.free-shipping-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-alt), var(--color-orange-200));
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) ease;
}

.free-shipping-bar.is-reached .free-shipping-progress span {
  background: var(--success);
}

/* Testimonios */
.section-testimonials {
  padding: var(--space-18) 0;
  background: var(--background-alt);
}

.testimonials-heading {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-9);
}

.testimonials-heading h2 { margin-bottom: var(--space-3); }

.testimonials-heading p {
  margin: 0;
  color: var(--text-secondary);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.testimonial-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.testimonial-card .rating-stars {
  font-size: var(--text-sm);
}

.testimonial-quote {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.testimonial-quote::before {
  content: "\201C";
  display: inline;
  color: var(--accent-alt);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-compressed);
  margin-right: var(--space-1);
  vertical-align: -6px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--accent-3);
}

.testimonial-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent-4);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}

.testimonial-author strong {
  display: block;
  color: var(--accent-4);
  font-size: var(--text-sm);
}

.testimonial-author small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.testimonial-verified {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--success);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.testimonial-verified .material-symbols-outlined { font-size: var(--text-base); }

/* Why-Glasstech (métricas) */
.why-section {
  padding: var(--space-18) 0;
  background: var(--color-white);
}

.why-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-9);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.why-card {
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  text-align: center;
  box-shadow: var(--shadow-1);
}

.why-card .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-orange-500-rgb), 0.14);
  color: var(--accent-alt);
  font-size: var(--text-3xl);
}

.why-metric {
  display: block;
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
  margin-bottom: var(--space-2);
}

.why-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.why-card strong {
  color: var(--accent-4);
  display: block;
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

/* FAQ acordeón */
.faq-section {
  padding: var(--space-18) 0;
  background: var(--background-alt);
}

.faq-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-8);
}

.faq-heading p {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
}

.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: var(--faq-list-gap);
}

.faq-item {
  position: relative;
  border: 1px solid var(--faq-item-border);
  border-radius: var(--faq-item-radius);
  background: var(--faq-item-background);
  box-shadow: var(--faq-item-shadow);
  overflow: hidden;
  transition: border-color var(--duration-fast) ease-in-out, box-shadow var(--duration-normal) ease-out;
}

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

.faq-item[open] {
  border-color: var(--faq-item-border-active);
}

.faq-item > summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  min-height: var(--faq-question-min-height);
  padding: var(--faq-question-padding-block) var(--faq-question-padding-inline);
  cursor: pointer;
  background: var(--faq-question-background);
  color: var(--faq-question-color);
  font-family: var(--font-body);
  font-weight: var(--faq-question-font-weight);
  font-size: var(--faq-question-font-size);
  line-height: var(--faq-question-line-height);
  list-style: none;
  transition: background-color var(--duration-fast) ease-in-out, color var(--duration-fast) ease-in-out, box-shadow var(--duration-fast) ease-in-out;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary:hover {
  background: var(--faq-question-background-interactive);
  color: var(--faq-question-color-active);
}

.faq-item > summary:focus-visible {
  outline: 0;
  box-shadow: var(--faq-focus-ring);
}

.faq-item > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--faq-question-color-active);
  border-bottom: 2px solid var(--faq-question-color-active);
  flex-shrink: 0;
  transform: rotate(45deg);
  transition: transform var(--duration-slow) ease;
}

.faq-item[open] > summary::after {
  transform: rotate(225deg);
}

.faq-item[open] > summary {
  color: var(--faq-question-color-active);
  background: var(--faq-question-background-interactive);
  border-bottom: 1px solid var(--faq-item-border);
}

.faq-body {
  padding: var(--faq-answer-padding-block) var(--faq-answer-padding-inline);
  background: var(--faq-item-background);
  color: var(--faq-answer-color);
  font-family: var(--font-body);
  font-size: var(--faq-answer-font-size);
  font-weight: var(--font-regular);
  line-height: var(--faq-answer-line-height);
}

.faq-body p:first-child { margin-top: 0; }
.faq-body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  :root {
    --faq-question-padding-block: var(--space-4);
    --faq-question-padding-inline: var(--space-4);
    --faq-answer-padding-block: var(--space-4);
    --faq-answer-padding-inline: var(--space-4);
  }
}

.faq-cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-7);
}

/* Payment methods */
.payment-methods-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(var(--color-white-rgb), 0.12);
}

.payment-methods-row span:first-child {
  color: rgba(var(--color-white-rgb), 0.7);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-right: var(--space-2);
}

.payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--accent-4);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-label);
  box-shadow: 0 2px 6px rgba(var(--color-black-rgb), 0.18);
}

.payment-badge.brand-visa { color: var(--color-payment-visa); }
.payment-badge.brand-mc { color: var(--color-payment-mastercard); }
.payment-badge.brand-amex { color: var(--color-payment-amex); }
.payment-badge.brand-webpay { color: var(--color-payment-webpay); }
.payment-badge.brand-transbank { color: var(--color-payment-transbank); }

/* Payment methods variant en checkout (fondo claro) */
.checkout-payment-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.checkout-payment-badges .payment-badge {
  box-shadow: none;
  border: 1px solid var(--accent-3);
}

/* Sello de pago seguro */
.secure-seal {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--color-success-600-rgb), 0.32);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-success-600-rgb), 0.08);
  color: var(--accent-4);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.secure-seal .material-symbols-outlined {
  color: var(--success);
  font-size: var(--text-2xl);
}

/* WhatsApp flotante */
.whatsapp-float {
  display: inline-flex;
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-sticky);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-whatsapp);
  color: var(--text-on-whatsapp);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(var(--color-whatsapp-rgb), 0.42);
  transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(var(--color-whatsapp-rgb), 0.5);
}

.whatsapp-float .material-symbols-outlined {
  color: var(--color-white);
  font-size: var(--text-2xl);
}

.checkout-page .whatsapp-float { display: inline-flex; }

@media (max-width: 640px) {
  .whatsapp-float {
    right: var(--space-4);
    bottom: var(--space-4);
    padding: var(--space-3);
  }

  .whatsapp-float span:not(.material-symbols-outlined) {
    display: none;
  }
}

/* Notify me form (avísame) */
.notify-form {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
}

.notify-form input {
  min-height: 38px;
  font-size: var(--text-sm);
}

.notify-form button {
  min-height: 38px;
}

/* Cross-sell del carrito */
.cross-sell-section {
  margin-top: var(--space-8);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cross-sell-section h2 {
  display: grid;
  grid-template-columns: minmax(var(--space-6), 1fr) auto minmax(var(--space-6), 1fr);
  gap: var(--space-4);
  align-items: center;
  font-size: var(--text-2xl);
  line-height: var(--leading-title);
  margin-bottom: var(--space-5);
  text-align: center;
}

.cross-sell-section h2::before,
.cross-sell-section h2::after {
  content: "";
  height: 1px;
  background: var(--accent-3);
}

.cross-sell-section > p {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-4);
}

.cross-sell-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 98px;
  padding: var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
}

.cross-sell-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
}

.cross-sell-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-1);
}

.cross-sell-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.cross-sell-card strong {
  color: var(--accent-4);
  font-size: var(--text-sm);
  margin: 0;
}

.cross-sell-action {
  grid-column: auto;
  flex-shrink: 0;
  justify-content: flex-start;
}

.cross-sell-action .btn {
  min-width: 116px;
}

/* Reseñas en PDP */
.reviews-section {
  padding: var(--space-14) 0;
  background: var(--background-alt);
}

.reviews-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.reviews-heading h2 { margin-bottom: var(--space-1); }

.reviews-summary {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.reviews-summary strong {
  color: var(--accent-4);
  font-size: var(--text-2xl);
  font-family: var(--font-heading);
  margin-right: var(--space-2);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.review-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.review-card time {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.review-card p {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.review-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--accent-3);
}

/* Guía cómo medir */
.measure-guide {
  padding: var(--space-6);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.measure-guide h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.measure-steps {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.measure-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.measure-steps .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent-alt);
  font-size: var(--text-2xl);
}

.measure-steps strong {
  display: block;
  color: var(--accent-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.measure-steps p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.measure-guide .measure-link {
  color: var(--accent-alt);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}

/* Bloque compartir en confirmación */
.share-block {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid rgba(var(--color-orange-500-rgb), 0.32);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(var(--color-orange-500-rgb), 0.08), rgba(var(--color-orange-500-rgb), 0.02));
}

.share-block h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--accent-4);
}

.share-block p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.share-buttons a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.share-buttons a:hover {
  border-color: var(--accent-alt);
  color: var(--accent-alt);
}

.share-buttons .material-symbols-outlined { color: var(--accent-alt); font-size: var(--text-xl); }

/* Sección CTA WhatsApp del home */
.whatsapp-cta {
  padding: var(--space-14) 0;
  background: var(--surface);
  color: var(--text-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.whatsapp-cta-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: space-between;
}

.whatsapp-cta-text h2 {
  color: var(--text-heading);
  max-width: 620px;
  margin-bottom: var(--space-2);
}

.whatsapp-cta-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.whatsapp-cta .btn {
  background: var(--color-whatsapp);
  color: var(--text-on-whatsapp);
  border-color: var(--color-whatsapp);
}

.whatsapp-cta .btn:hover {
  background: var(--color-whatsapp-hover);
}

/* Ayuda: centro de ayuda con categorías */
.help-search {
  max-width: 640px;
  margin: 0 auto var(--space-10);
}

.help-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 auto var(--space-10);
}

.help-category {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-1);
  transition: border-color var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.help-category:hover {
  border-color: var(--accent-alt);
  transform: translateY(-2px);
}

.help-category .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-1);
}

.help-category strong {
  display: block;
  color: var(--accent-4);
  font-size: var(--text-base);
}

.help-category p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.help-faq-block {
  width: 100%;
  max-width: 880px;
  margin: var(--space-10) auto 0;
  scroll-margin-top: var(--space-30);
}

.help-faq-block .faq-list {
  width: 100%;
  max-width: none;
  margin: 0;
  gap: var(--space-3);
}

.help-faq-block h2 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-4);
  color: var(--accent-4);
}

.help-contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--background-alt);
  border: 1px solid var(--accent-3);
}

.help-contact-row > div {
  display: grid;
  gap: var(--space-2);
}

.help-contact-row h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--accent-4);
}

.help-contact-row p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Categoría card: ver / comprar */
.category-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-white);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}

.category-cta::after {
  content: "\2192";
  transition: transform var(--duration-normal) ease;
}

.category-card-image:hover .category-cta::after {
  transform: translateX(4px);
}

/* Hero home simplificado (single hero) */
.home-hero-single {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  padding: var(--space-35) 0 var(--space-23);
  overflow: hidden;
  background: var(--surface);
  color: var(--color-white);
}

.home-hero-single .hero-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

.home-hero-single .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-underlay);
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.55) 0%, rgba(var(--color-black-rgb), 0.32) 45%, rgba(var(--color-black-rgb), 0.12) 100%);
}

.home-hero-single .container {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  gap: var(--space-5);
  max-width: var(--container);
}

.home-hero-single h1 {
  max-width: 720px;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-8xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-display);
  text-shadow: 0 12px 30px rgba(var(--color-black-rgb), 0.32);
}

.home-hero-single .hero-lead {
  max-width: 620px;
  margin: 0;
  color: rgba(var(--color-white-rgb), 0.9);
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  line-height: var(--leading-body);
}

.home-hero-single .hero-trust-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
  color: rgba(var(--color-white-rgb), 0.9);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.home-hero-single .hero-trust-inline span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.home-hero-single .hero-trust-inline .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-lg);
}

@media (max-width: 640px) {
  .home-hero-single {
    min-height: 580px;
    padding: var(--space-45) 0 var(--space-15);
  }
}

/* Responsive general para los nuevos módulos */
@media (max-width: 980px) {
  .testimonial-grid,
  .why-grid,
  .help-categories,
  .reviews-grid,
  .help-contact-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .whatsapp-cta-inner { flex-direction: column; align-items: flex-start; }
  .whatsapp-cta-inner .btn { width: 100%; }
}

@media (max-width: 640px) {
  .testimonial-grid,
  .why-grid,
  .help-categories,
  .reviews-grid,
  .cross-sell-grid,
  .help-contact-row,
  .trust-badge-row {
    grid-template-columns: 1fr;
  }

  .section-testimonials,
  .why-section,
  .faq-section,
  .reviews-section {
    padding: var(--space-12) 0;
  }

  .cross-sell-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-3);
    min-height: 0;
  }

  .cross-sell-thumb {
    width: 56px;
    height: 56px;
  }

  .cross-sell-action {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cross-sell-action .btn {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 160px;
  }
}


/* ============================================================
   PDP unificado: bloques numerados (reemplazan al stepper decorativo)
   y add-ons con botón "Agregar" directo al carrito.
   ============================================================ */

/* Índice de secciones del PDP (reemplaza al stepper que parecía interactivo) */
.pdp-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--background-alt);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.pdp-toc strong {
  color: var(--accent-4);
  margin-right: var(--space-2);
}

.pdp-toc a {
  color: var(--accent-alt);
  font-weight: var(--font-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bloque numerado tipo "1. Medidas", "2. Cristal", ... */
.config-block {
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
  scroll-margin-top: var(--space-35);
}

.config-block-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--accent-3);
}

.config-block-number {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.config-block-header h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--accent-4);
  margin: 0;
}

.config-block-header small {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-top: var(--space-1);
}

.config-block-body {
  display: grid;
  gap: var(--space-3);
}

.config-block-body .two-cols {
  gap: var(--space-3);
}

/* Add-ons compactos con botón "Agregar" directo */
.addon-section {
  margin-top: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.addon-section h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--accent-4);
  margin: 0 0 var(--space-1);
}

.addon-section > p {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.addon-list {
  display: grid;
  gap: var(--space-3);
}

.addon-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease;
}

.addon-item:hover {
  border-color: var(--accent-alt);
  background: var(--color-white);
}

.addon-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
}

.addon-info h3 {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--accent-4);
  margin: 0 0 var(--space-1);
  line-height: var(--leading-tight);
}

.addon-info p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.addon-actions {
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  align-items: center;
}

.addon-price {
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  line-height: var(--leading-none);
}

.addon-actions .btn {
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Bundle destacado (opcional, para checkout suggerido cuando aplique) */
.addon-bundle-hint {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-orange-500-rgb), 0.10);
  color: var(--color-orange-700);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.addon-bundle-hint .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

/* Toast simple para confirmar "producto agregado" */
.cart-toast {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: var(--z-sticky-nav);
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--color-success-600-rgb), 0.4);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 12px 30px rgba(var(--color-navy-900-rgb), 0.18);
  color: var(--accent-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  max-width: 320px;
}

.cart-toast.is-visible {
  display: flex;
  animation: cartToastIn var(--duration-slow) ease;
}

.cart-toast .material-symbols-outlined {
  color: var(--success);
  font-size: var(--text-2xl);
}

.cart-toast a {
  color: var(--accent-alt);
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes cartToastIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 640px) {
  .config-block {
    padding: var(--space-5);
  }

  .addon-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .addon-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    justify-items: stretch;
    align-items: center;
  }

  .addon-actions .btn { width: auto; }

  .cart-toast {
    left: 14px;
    right: 14px;
    max-width: none;
    bottom: 80px;
  }
}


/* ============================================================
   PDP de alta conversión: hero 2 columnas sticky + buybar mobile
   ============================================================ */

.pdp-hero {
  padding: var(--space-6) 0 var(--space-10);
}

.pdp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: var(--space-10);
  align-items: start;
}

/* Columna galería: sticky en desktop */
.pdp-gallery-col {
  position: sticky;
  top: 100px;
  display: grid;
  gap: var(--space-3);
}

.pdp-gallery-main {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.pdp-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.pdp-gallery-thumbs span,
.pdp-gallery-thumbs button {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--duration-normal) ease;
}

.pdp-gallery-thumbs button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery-thumbs .gallery-view-general img { object-position: center; }
.pdp-gallery-thumbs .gallery-view-detail img { object-position: 72% center; transform: scale(1.7); }
.pdp-gallery-thumbs .gallery-view-glass img { object-position: 30% 42%; transform: scale(2); }
.pdp-gallery-thumbs .gallery-view-install img { object-position: 88% 68%; transform: scale(1.85); }

.pdp-gallery-thumbs span:hover,
.pdp-gallery-thumbs span.is-active,
.pdp-gallery-thumbs button:hover,
.pdp-gallery-thumbs button:focus-visible,
.pdp-gallery-thumbs button.is-active {
  border-color: var(--accent-alt);
}

.pdp-gallery-main,
.pdp-gallery-thumbs button {
  background-size: cover;
  background-repeat: no-repeat;
}

.gallery-view-general,
.pdp-gallery-main:not([data-gallery-active]),
.pdp-gallery-main[data-gallery-active="general"] { background-position: center; }
.gallery-view-detail,
.pdp-gallery-main[data-gallery-active="detail"] { background-position: 72% center; background-size: 175%; }
.gallery-view-glass,
.pdp-gallery-main[data-gallery-active="glass"] { background-position: 30% 42%; background-size: 210%; }
.gallery-view-install,
.pdp-gallery-main[data-gallery-active="install"] { background-position: 88% 68%; background-size: 190%; }

/* Columna compra: sticky en desktop, contiene todo lo que decide la compra */
.pdp-buy-col {
  position: sticky;
  top: 100px;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.pdp-buy-col > .badge-row {
  margin: 0;
}

.pdp-buy-col h1,
.pdp-buy-col h2 {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--font-bold);
  color: var(--accent-4);
  line-height: var(--leading-title);
  margin: 0;
}

.pdp-buy-col .sku {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pdp-buy-col .pdp-price {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--accent-4);
  line-height: var(--leading-none);
}

.pdp-buy-col .pdp-price-hint {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pdp-installation-addon {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-block: 1px solid var(--accent-3);
  background: transparent;
  transition: border-color var(--duration-normal) ease, background-color var(--duration-normal) ease;
}

.pdp-installation-addon.is-selected {
  border-color: var(--accent-alt);
  background: rgba(var(--color-orange-500-rgb), 0.07);
}

.pdp-installation-heading {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.pdp-installation-heading > .material-symbols-outlined {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--color-white);
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

.pdp-installation-heading h3 {
  margin: 0 0 var(--space-1);
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.pdp-installation-heading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.pdp-installation-action-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--accent-3);
}

.pdp-installation-price {
  color: var(--text-heading);
  font-size: var(--text-base);
  line-height: var(--leading-heading);
}

.pdp-installation-price small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.pdp-installation-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-alt);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--accent-alt);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  cursor: pointer;
  transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease, color var(--duration-normal) ease;
}

.pdp-installation-toggle:hover {
  background: rgba(var(--color-orange-500-rgb), 0.08);
}

.pdp-installation-toggle:has(input:focus-visible) {
  outline: 3px solid rgba(var(--color-orange-500-rgb), 0.22);
  outline-offset: 2px;
}

.pdp-installation-toggle:has(input:checked) {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.pdp-purchase-total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--accent-3);
}

.pdp-purchase-total > div {
  display: grid;
  gap: var(--space-1);
}

.pdp-purchase-total span {
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.pdp-purchase-total small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.pdp-purchase-total > strong {
  flex: 0 0 auto;
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-none);
}

@media (prefers-reduced-motion: reduce) {
  .pdp-installation-addon,
  .pdp-installation-toggle {
    transition: none;
  }
}

.pdp-buy-col .pdp-lead {
  margin: var(--space-1) 0 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* Configurador compacto dentro del buy-col (a medida) */
.pdp-compact-fields {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--background-alt);
}

.pdp-compact-fields > .pdp-compact-title {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-heading);
  margin: 0;
}

.pdp-compact-fields > .pdp-compact-title .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-xl);
}

/* Secciones dentro del configurador */
.pdp-compact-group {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--accent-3);
}

.pdp-compact-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.pdp-compact-group-label {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.pdp-compact-group-label .material-symbols-outlined {
  font-size: var(--text-base);
  color: var(--accent);
}

.pdp-compact-fields label {
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--text-heading);
}

.pdp-compact-fields label small {
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.pdp-compact-fields input,
.pdp-compact-fields select {
  min-height: 40px;
  font-size: var(--text-sm);
  background: var(--color-white);
}

.pdp-compact-fields .pdp-compact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pdp-compact-fields .radio-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.pdp-compact-fields .radio-inline label {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease;
}

.pdp-compact-fields .radio-inline label small {
  display: block;
  color: var(--text-secondary);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

.pdp-compact-fields .radio-inline label:has(input:checked) {
  border-color: var(--accent-alt);
  background: rgba(var(--color-orange-500-rgb), 0.08);
}

.pdp-compact-fields .radio-inline label:has(input:checked) strong {
  color: var(--accent-alt);
}

.pdp-compact-disclaimer {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-blue-500-rgb), 0.08);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.pdp-compact-disclaimer .material-symbols-outlined {
  color: var(--accent-secondary);
  font-size: var(--text-sm);
  margin-top: 0;
}

/* Mini-card de resumen + precio destacado */
.pdp-config-summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.pdp-config-summary .pdp-config-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pdp-config-summary .pdp-config-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  margin: 0;
}

.pdp-config-summary .pdp-config-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--accent-3);
}

.pdp-config-summary .pdp-config-price-row span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pdp-config-summary .pdp-config-price-row strong {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--accent-4);
  line-height: var(--leading-none);
}

.pdp-config-summary .pdp-config-price-hint {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* Legacy summary line (queda como fallback) */
.pdp-summary-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.pdp-summary-line strong {
  color: var(--text-heading);
  font-weight: var(--font-bold);
}

.pdp-buy-col .btn-primary.btn-block {
  min-height: 52px;
  font-size: var(--text-base);
}

.pdp-quick-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.pdp-quick-facts > div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  text-align: center;
}

.pdp-quick-facts .material-symbols-outlined {
  justify-self: center;
  color: var(--accent-alt);
  font-size: var(--text-lg);
}

.pdp-quick-facts strong {
  color: var(--accent-4);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: var(--leading-title);
}

.pdp-quick-facts small {
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  line-height: var(--leading-title);
}

/* Área secundaria (bajo el hero de 2 cols) */
.pdp-secondary {
  padding: var(--space-6) 0 var(--space-14);
}

.pdp-secondary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: var(--space-6);
  align-items: start;
}

.pdp-secondary-main {
  min-width: 0;
}

.pdp-addon-sidebar {
  position: sticky;
  top: 112px;
  align-self: start;
}

.pdp-addon-sidebar .addon-section {
  margin-top: 0;
  max-height: calc(100vh - 136px);
  overflow: auto;
}

.pdp-addon-sidebar .addon-list {
  gap: var(--space-3);
}

.pdp-addon-sidebar .addon-item {
  grid-template-columns: 52px minmax(0, 1fr);
}

.pdp-addon-sidebar .addon-thumb {
  width: 52px;
  height: 52px;
}

.pdp-addon-sidebar .addon-actions {
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  justify-items: stretch;
}

.pdp-addon-sidebar .addon-actions .btn {
  justify-self: end;
}

.pdp-secondary-block {
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.pdp-secondary-block > h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--accent-4);
  margin: 0 0 var(--space-1);
}

.pdp-secondary-block > p.pdp-block-lead {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Barra fija mobile con precio + Agregar */
.pdp-mobile-buybar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  align-items: center;
  background: var(--color-white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 22px rgba(var(--color-black-rgb), 0.08);
}

.pdp-mobile-buybar .pdp-mobile-price {
  display: grid;
  gap: 0;
}

.pdp-mobile-buybar strong {
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-none);
}

.pdp-mobile-buybar small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pdp-mobile-buybar .btn {
  flex: 1;
  min-height: 44px;
  margin-left: auto;
  max-width: 200px;
}

@media (max-width: 980px) {
  .pdp-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .pdp-secondary-layout {
    grid-template-columns: 1fr;
  }

  .quote-page-layout,
  .quote-option-grid,
  .quote-field-grid,
  .quote-check-grid,
  .quote-timeline {
    grid-template-columns: 1fr;
  }

  .quote-timeline::before,
  .quote-timeline::after {
    top: 48px;
    left: 42px;
    right: auto;
    bottom: 48px;
    width: 3px;
    height: auto;
    transform-origin: top;
  }

  .quote-timeline::after {
    animation-name: quoteTimelineProgressVertical;
  }

  .quote-timeline-step {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    min-height: 0;
  }

  .quote-timeline-step .material-symbols-outlined {
    grid-column: 1;
  }

  .quote-timeline-step strong,
  .quote-timeline-step small {
    grid-column: 2;
  }

  .pdp-gallery-col,
  .pdp-buy-col,
  .pdp-addon-sidebar,
  .quote-page-aside {
    position: static;
    top: auto;
  }

  .pdp-addon-sidebar {
    order: -1;
  }

  .pdp-addon-sidebar .addon-section {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .pdp-hero {
    padding: var(--space-4) 0 var(--space-6);
  }

  .pdp-buy-col {
    padding: var(--space-5);
    padding-bottom: var(--space-6);
  }

  .pdp-buy-col h1,
  .pdp-buy-col h2 {
    font-size: var(--text-2xl);
  }

  .pdp-buy-col .pdp-price {
    font-size: var(--text-3xl);
  }

  .pdp-installation-action-row,
  .pdp-purchase-total {
    align-items: stretch;
    flex-direction: column;
  }

  .pdp-installation-toggle {
    width: 100%;
  }

  .pdp-purchase-total > strong {
    font-size: var(--text-3xl);
  }

  .pdp-compact-fields .pdp-compact-row,
  .pdp-compact-fields .radio-inline {
    grid-template-columns: 1fr;
  }

  .pdp-quick-facts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
  }

  .pdp-secondary-block {
    padding: var(--space-5);
  }

  .pdp-mobile-buybar {
    display: flex;
  }

  /* Espacio inferior extra en mobile para no tapar contenido con la buybar */
  body:has(.pdp-mobile-buybar) main {
    padding-bottom: var(--space-20);
  }

  /* En mobile con buybar, el whatsapp-float sube para no chocar */
  body:has(.pdp-mobile-buybar) .whatsapp-float {
    bottom: 78px;
  }
}

/* Home ajustada al mapa de sitio Glasstech ecommerce */
.header-search {
  max-width: 640px;
  width: 100%;
  margin-inline: auto;
}

.header-search button {
  display: grid;
  place-items: center;
}

.header-search-row {
  padding: 0 0 var(--space-3);
}

.header-search-row .search-form {
  min-height: 38px;
  border-color: rgba(var(--color-neutral-300-rgb), 0.72);
  box-shadow: var(--elevation-card);
}

.header-search-row input {
  padding-block: var(--space-2);
  font-size: var(--text-sm);
}

.header-search-row button {
  background: var(--accent-alt);
}

.has-transparent-header .site-header:not(.is-scrolled) .header-search {
  border-color: rgba(var(--color-white-rgb), 0.45);
  background: rgba(var(--color-white-rgb), 0.94);
}

.has-transparent-header .site-header:not(.is-scrolled) .header-search-row {
  border-top: 1px solid rgba(var(--color-white-rgb), 0.12);
}

.sitemap-hero {
  min-height: 640px;
}

.sitemap-hero .hero-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  animation: heroKenBurns 18s ease-in-out infinite alternate;
}

.sitemap-hero .hero-slide:not(.is-active) > img {
  animation-play-state: paused;
}

.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.58) 0%, rgba(var(--color-black-rgb), 0.35) 48%, rgba(var(--color-black-rgb), 0.12) 100%);
}

.hero-slide-content {
  position: relative;
  z-index: var(--z-control);
  display: grid;
  align-content: center;
  min-height: 640px;
  padding-top: var(--space-39);
  padding-bottom: var(--space-20);
}

.hero-slide-content .eyebrow {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: clamp(var(--text-xs), 1.1vw, var(--text-base));
  font-weight: var(--font-extrabold);
  line-height: var(--leading-display);
  text-transform: uppercase;
  text-shadow: none;
}

.hero-slide-content h1,
.hero-slide-content h2 {
  max-width: 760px;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-8xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
}

.hero-slide-content p:not(.eyebrow) {
  max-width: 620px;
  margin: var(--space-5) 0 0;
  color: rgba(var(--color-white-rgb), 0.9);
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
}

.hero-controls {
  position: absolute;
  z-index: var(--z-floating);
  left: 50%;
  bottom: 96px;
  display: flex;
  gap: var(--space-3);
  transform: translateX(-50%);
  justify-content: center;
}

.hero-controls button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid rgba(var(--color-white-rgb), 0.74);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-white-rgb), 0.20);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--color-black-rgb), 0.20);
  transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.hero-controls button.is-active {
  width: 12px;
  background: var(--accent-alt);
  border-color: var(--accent-alt);
  transform: scale(1.18);
}

.hero-controls button:hover {
  background: rgba(var(--color-white-rgb), 0.68);
  border-color: var(--color-white);
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: var(--z-elevated);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--color-white-rgb), 0.34);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-white-rgb), 0.18);
  color: var(--color-white);
  box-shadow: 0 14px 32px rgba(var(--color-black-rgb), 0.18);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: background var(--duration-normal) ease, transform var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

.hero-arrow:hover {
  transform: translateY(calc(-50% - 1px));
  border-color: rgba(var(--color-white-rgb), 0.62);
  background: rgba(var(--color-white-rgb), 0.30);
}

.hero-arrow-prev {
  left: max(18px, calc((100vw - 1180px) / 2 - 62px));
}

.hero-arrow-next {
  right: max(18px, calc((100vw - 1180px) / 2 - 62px));
}

.hero-arrow .material-symbols-outlined {
  font-size: var(--text-4xl);
}


.commerce-benefits {
  position: relative;
  z-index: var(--z-control);
  margin-top: calc(-1 * var(--space-8));
  padding-bottom: var(--space-7);
}

.commerce-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 14px 34px rgba(var(--color-navy-900-rgb), 0.12);
}

.commerce-benefits-grid > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--accent-3);
}

.commerce-benefits-grid > div:last-child {
  border-right: 0;
}

.commerce-benefits-grid .material-symbols-outlined {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
}

.commerce-benefits-grid strong {
  color: var(--text-heading);
  font-size: var(--text-sm);
}

.commerce-benefits-grid small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.home-map-section {
  padding: var(--space-13) 0;
  border-bottom: 1px solid var(--accent-3);
}

.home-map-section .section-heading {
  margin-bottom: var(--space-5);
}

.home-map-section h2 {
  color: var(--text-heading);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
}

.home-map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

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

.map-card,
.info-card,
.service-card,
.map-product-card {
  display: grid;
  gap: var(--space-3);
  min-height: 150px;
  padding: var(--space-5);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.map-card:hover,
.info-card:hover,
.service-card:hover,
.map-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-alt);
  box-shadow: var(--shadow-2);
}

.map-card {
  position: relative;
  overflow: hidden;
  align-content: end;
  min-height: 190px;
  isolation: isolate;
  color: var(--color-white);
}

.solution-grid .map-card {
  min-height: 210px;
}

.map-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: var(--z-behind);
  transition: transform var(--duration-normal) ease;
}

.map-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-underlay);
  background: linear-gradient(180deg, rgba(var(--color-navy-900-rgb), 0.08), rgba(var(--color-navy-900-rgb), 0.78));
}

.map-card:hover img {
  transform: scale(1.04);
}

.map-card strong,
.map-card span:not(.material-symbols-outlined) {
  position: relative;
  z-index: var(--z-content);
}

.map-card strong,
.info-card strong,
.service-card strong,
.map-product-card strong {
  color: var(--text-heading);
  font-size: var(--text-base);
  text-transform: uppercase;
}

.map-card strong {
  color: var(--color-white);
}

.map-card span,
.map-product-card span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.map-card span {
  color: rgba(var(--color-white-rgb), 0.86);
}

.map-card .material-symbols-outlined,
.info-card .material-symbols-outlined,
.service-card .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-4xl);
}

.filter-preview-section {
  padding: 0 0 var(--space-11);
  background: var(--color-white);
  border-bottom: 1px solid var(--accent-3);
}

.filter-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--background-alt);
}

.filter-preview strong {
  margin-right: var(--space-2);
  color: var(--text-heading);
  font-size: var(--text-sm);
}

.filter-preview span {
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.map-product-card {
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  gap: 0;
  overflow: hidden;
  padding: 0;
  align-content: stretch;
  transition: transform var(--duration-slow) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-slow) var(--ease-standard);
}

.map-product-card .product-media,
.map-product-image {
  min-height: 190px;
  border-radius: 0;
}

.map-product-image {
  display: block;
  align-self: start;
  overflow: hidden;
  background: var(--surface);
}

.map-product-image img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.map-product-card:hover .map-product-image img {
  transform: scale(1.025);
}

.map-product-card > div,
.map-product-body {
  display: grid;
  gap: var(--space-3);
}

.map-product-body {
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.product-state-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.commerce-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--badge-min-height);
  width: max-content;
  padding: var(--badge-padding-block) var(--badge-padding-inline);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size) !important;
  font-weight: var(--badge-font-weight);
  line-height: var(--badge-line-height);
}

.badge-measure,
.badge-ready {
  background: var(--surface);
  color: var(--text-heading) !important;
}

.badge-stock-ok {
  background: rgba(var(--color-success-600-rgb), 0.12);
  color: var(--success) !important;
}

.badge-wait {
  background: rgba(var(--color-blue-500-rgb), 0.12);
  color: var(--color-blue-600) !important;
}

.badge-new {
  background: rgba(var(--color-navy-900-rgb), 0.10);
  color: var(--text-heading) !important;
}

.badge-quote {
  background: rgba(var(--color-orange-500-rgb), 0.14);
  color: var(--color-orange-700) !important;
}

.badge-promo {
  background: rgba(var(--color-danger-600-rgb), 0.10);
  color: var(--color-danger-700) !important;
}

.map-product-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.map-product-card .btn {
  align-self: end;
  width: calc(100% - 36px);
  min-height: 44px;
  margin: 0 var(--space-5) var(--space-5);
}

.useful-section {
  background: var(--color-white);
}

.services-section,
.home-featured {
  background: var(--background-alt);
}

.quote-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-23) 0 var(--space-26);
  background: linear-gradient(135deg, rgba(var(--color-navy-900-rgb), 0.96), rgba(var(--color-navy-900-rgb), 0.78)),
    linear-gradient(90deg, rgba(var(--color-white-rgb), 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--color-white-rgb), 0.08) 1px, transparent 1px),
    url("../images/categories/cubiertas.png");
  background-position: center;
  background-size: auto, 34px 34px, 34px 34px, cover;
  border-bottom: 0;
  color: var(--color-white);
}

.quote-section::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% 42%;
  z-index: var(--z-underlay);
  height: 360px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(var(--color-orange-500-rgb), 0.36), transparent 64%);
}

.quote-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.82fr);
  gap: var(--space-11);
  align-items: center;
  min-height: 520px;
  padding: var(--space-12);
  border: 1px solid rgba(var(--color-white-rgb), 0.18);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(var(--color-white-rgb), 0.12), rgba(var(--color-white-rgb), 0.06)),
    linear-gradient(90deg, rgba(var(--color-navy-900-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--color-navy-900-rgb), 0.05) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  box-shadow: 0 28px 70px rgba(var(--color-black-rgb), 0.22);
  backdrop-filter: blur(12px);
}

.quote-copy h2 {
  max-width: 760px;
  color: var(--color-white);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-7xl));
  line-height: var(--leading-none);
}

.quote-copy p:not(.eyebrow) {
  max-width: 680px;
  margin: var(--space-5) 0 0;
  color: rgba(var(--color-white-rgb), 0.84);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.quote-steps {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.quote-steps::before {
  content: "";
  position: absolute;
  top: 36px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-white-rgb), 0), rgba(var(--color-white-rgb), 0.34), rgba(var(--color-white-rgb), 0));
}

.quote-steps > div {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  min-height: 178px;
  padding: var(--space-6);
  border: 1px solid rgba(var(--color-white-rgb), 0.20);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(var(--color-white-rgb), 0.16), rgba(var(--color-white-rgb), 0.08)),
    rgba(var(--color-white-rgb), 0.08);
  box-shadow: 0 18px 44px rgba(var(--color-black-rgb), 0.12);
  transition: transform var(--duration-normal) ease, background var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.quote-steps > div:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-orange-500-rgb), 0.66);
  background: linear-gradient(180deg, rgba(var(--color-white-rgb), 0.20), rgba(var(--color-white-rgb), 0.10)),
    rgba(var(--color-white-rgb), 0.10);
  box-shadow: 0 24px 54px rgba(var(--color-black-rgb), 0.18);
}

.quote-steps span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-alt), var(--color-orange-200));
  color: var(--color-white);
  font-weight: var(--font-bold);
  transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.quote-steps > div:hover span {
  transform: scale(1.06);
}

.quote-steps strong {
  color: var(--color-white);
  font-size: var(--text-base);
}

.quote-steps small {
  color: rgba(var(--color-white-rgb), 0.76);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.quote-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.quote-actions .btn {
  white-space: nowrap;
}

.quote-visual {
  display: grid;
  justify-items: end;
}

.quote-visual-card {
  display: grid;
  gap: var(--space-5);
  width: min(100%, 390px);
  padding: var(--space-7);
  border: 1px solid rgba(var(--color-white-rgb), 0.18);
  border-radius: var(--radius-md);
  background: rgba(var(--color-white-rgb), 0.94);
  color: var(--text-heading);
  box-shadow: 0 24px 60px rgba(var(--color-black-rgb), 0.24);
}

.quote-visual-label {
  width: max-content;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-orange-500-rgb), 0.14);
  color: var(--color-orange-700);
  font-size: var(--text-xs);
  font-weight: var(--font-extrabold);
  text-transform: uppercase;
}

.quote-visual-card > strong {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
}

.quote-meter {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.quote-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-alt), var(--color-orange-200));
}

.quote-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.quote-values label {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.quote-values label:last-child {
  grid-column: 1 / -1;
}

.quote-values input,
.quote-values select {
  min-height: 36px;
  padding: var(--space-2) var(--space-2);
  border-color: rgba(var(--color-blue-500-rgb), 0.26);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.quote-total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--accent-3);
}

.quote-total strong {
  color: var(--accent-4);
  font-size: var(--text-xl);
}

.quote-page-section {
  padding: var(--space-14) 0 var(--space-9);
  background: var(--color-neutral-100);
}

.quote-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: var(--space-7);
  align-items: start;
}

.quote-page-main {
  display: grid;
  gap: var(--space-5);
}

.quote-page-intro,
.quote-form-card,
.quote-summary-card,
.quote-help-card {
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.quote-page-intro {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-7);
}

.quote-page-intro h2 {
  max-width: 780px;
  color: var(--text-heading);
  font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
  line-height: var(--leading-display);
}

.quote-page-intro p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.quote-page-form {
  display: grid;
  gap: var(--space-4);
}

.quote-form-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
}

.quote-form-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.quote-form-heading > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
  font-weight: var(--font-extrabold);
}

.quote-form-heading h3 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-2xl);
}

.quote-form-heading p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.quote-contact-heading {
  margin-top: var(--space-1);
  padding-top: var(--space-5);
  border-top: 1px solid var(--accent-3);
}

.quote-contact-heading h3 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-xl);
}

.quote-contact-heading p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.quote-option-grid,
.quote-field-grid,
.quote-check-grid {
  display: grid;
  gap: var(--space-3);
}

.quote-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-choice {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 58px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
}

.quote-choice strong,
.quote-choice small {
  display: block;
}

.quote-choice strong {
  color: var(--text-heading);
}

.quote-choice small {
  margin-top: var(--space-1);
  line-height: var(--leading-snug);
}

.quote-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-field-grid label,
.quote-wide-field {
  display: grid;
  gap: var(--space-2);
  font-weight: var(--font-bold);
}

.quote-field-grid small {
  font-weight: var(--font-medium);
}

.quote-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quote-check-grid label {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
}

.quote-check-grid label > span {
  display: grid;
  gap: var(--space-1);
}

.quote-check-grid label strong,
.quote-check-grid label small {
  display: block;
}

.quote-check-grid label strong {
  color: var(--text-heading);
  line-height: var(--leading-snug);
}

.quote-check-grid label small {
  line-height: var(--leading-body);
}

.quote-check-grid input {
  margin-top: var(--space-1);
}

.quote-page-aside {
  position: sticky;
  top: 112px;
  display: grid;
  gap: var(--space-4);
}

.quote-summary-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}

.quote-summary-card h3 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
}

.quote-summary-card dl {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.quote-summary-card dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--accent-3);
}

.quote-summary-card dt {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.quote-summary-card dd {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  text-align: right;
}

.quote-summary-card .quote-actions {
  display: grid;
  margin-top: var(--space-1);
}

.quote-summary-card .quote-actions .btn {
  width: 100%;
}

.quote-price-breakdown {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--accent-3);
  border-bottom: 1px solid var(--accent-3);
}

.quote-price-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.quote-price-breakdown strong {
  color: var(--text-heading);
  white-space: nowrap;
}

.quote-price-breakdown [hidden] {
  display: none;
}

.quote-assistance-link {
  width: fit-content;
  color: var(--accent-alt);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quote-assistance-link:hover {
  color: var(--accent-alt-hover);
}

.quote-help-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
}

.quote-help-card[hidden] {
  display: none;
}

.quote-help-card .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
}

.quote-help-card strong {
  color: var(--text-heading);
}

.quote-help-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.quote-page-info {
  padding-top: var(--space-11);
}

.quote-timeline {
  --timeline-duration: 8s;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.quote-timeline::before,
.quote-timeline::after {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(12.5% + 22px);
  right: calc(12.5% + 22px);
  height: 3px;
  border-radius: var(--radius-pill);
}

.quote-timeline::before {
  background: var(--accent-3);
}

.quote-timeline::after {
  background: linear-gradient(90deg, var(--accent-alt), var(--color-orange-200));
  transform: scaleX(0);
  transform-origin: left;
  animation: quoteTimelineProgress var(--timeline-duration) ease-in-out infinite;
}

.quote-timeline-step {
  position: relative;
  z-index: var(--z-content);
  align-content: start;
  min-height: 178px;
  padding-top: var(--space-5);
  transition: transform var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
  animation: quoteTimelineStep var(--timeline-duration) ease-in-out infinite;
}

.quote-timeline-step:nth-child(2) {
  animation-delay: 2s;
}

.quote-timeline-step:nth-child(3) {
  animation-delay: 4s;
}

.quote-timeline-step:nth-child(4) {
  animation-delay: 6s;
}

.quote-step-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-1);
  border: 3px solid var(--color-white);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--inset-border);
  font-weight: var(--font-extrabold);
  animation: quoteTimelineDot var(--timeline-duration) ease-in-out infinite;
}

.quote-timeline-step:nth-child(2) .quote-step-number {
  animation-delay: 2s;
}

.quote-timeline-step:nth-child(3) .quote-step-number {
  animation-delay: 4s;
}

.quote-timeline-step:nth-child(4) .quote-step-number {
  animation-delay: 6s;
}

.quote-timeline-step .material-symbols-outlined {
  color: var(--accent-alt);
}

@keyframes quoteTimelineProgress {
  0%, 10% { transform: scaleX(0); }
  30% { transform: scaleX(0.34); }
  55% { transform: scaleX(0.67); }
  80%, 100% { transform: scaleX(1); }
}

@keyframes quoteTimelineStep {
  0%, 26%, 100% {
    transform: translateY(0);
    border-color: var(--accent-3);
    box-shadow: var(--shadow-1);
  }
  8%, 18% {
    transform: translateY(-4px);
    border-color: rgba(var(--color-orange-500-rgb), 0.55);
    box-shadow: 0 18px 42px rgba(var(--color-navy-900-rgb), 0.14);
  }
}

@keyframes quoteTimelineDot {
  0%, 26%, 100% {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--inset-border);
  }
  8%, 18% {
    background: var(--accent-alt);
    color: var(--text-on-accent-alt);
    box-shadow: 0 0 0 6px rgba(var(--color-orange-500-rgb), 0.14);
  }
}

.info-card,
.service-card {
  align-content: center;
}

.info-card small,
.service-card small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.location-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-18) 0;
  background: linear-gradient(135deg, rgba(var(--color-navy-900-rgb), 0.92), rgba(var(--color-navy-900-rgb), 0.42)),
    linear-gradient(90deg, rgba(var(--color-white-rgb), 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--color-white-rgb), 0.08) 1px, transparent 1px),
    var(--gt-branches-image, url("../images/categories/showerdoors.png"));
  background-position: center, center, center, center;
  background-size: auto, 32px 32px, 32px 32px, cover;
  border-bottom: 1px solid var(--accent-3);
  color: var(--color-white);
}

.location-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-underlay);
  background: radial-gradient(circle at 78% 34%, rgba(var(--color-orange-500-rgb), 0.24), transparent 28%),
    linear-gradient(90deg, rgba(var(--color-navy-900-rgb), 0.88), rgba(var(--color-navy-900-rgb), 0.46) 58%, rgba(var(--color-navy-900-rgb), 0.24));
}

.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: center;
  min-height: 320px;
}

.location-grid h2 {
  color: var(--color-white);
}

.location-grid p:not(.eyebrow) {
  max-width: 720px;
  margin: var(--space-3) 0 0;
  color: rgba(var(--color-white-rgb), 0.84);
}

.location-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.location-actions .btn {
  min-width: 170px;
}

.location-actions .btn-secondary {
  background: rgba(var(--color-white-rgb), 0.12);
  border-color: rgba(var(--color-white-rgb), 0.72);
  color: var(--color-white);
}

.location-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.location-highlights span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(var(--color-white-rgb), 0.22);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-white-rgb), 0.10);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.location-highlights .material-symbols-outlined {
  color: var(--accent-alt);
  font-size: var(--text-lg);
}

.contact-page-section {
  padding: var(--space-14) 0 var(--space-18);
  background: var(--surface);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-7);
  align-items: start;
}

.contact-info-panel,
.contact-form-card {
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.contact-info-panel {
  position: sticky;
  top: 112px;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8);
}

.contact-info-panel h2 {
  margin: 0;
  color: var(--text-heading);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  line-height: var(--leading-display);
}

.contact-info-panel > p:not(.eyebrow) {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.contact-method-list {
  display: grid;
  gap: var(--space-3);
}

.contact-method {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  color: inherit;
  transition: transform var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.contact-method:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--color-orange-500-rgb), 0.45);
  box-shadow: var(--shadow-1);
}

.contact-method > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
}

.contact-method strong,
.contact-method small {
  display: block;
}

.contact-method strong {
  color: var(--text-heading);
}

.contact-method small {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.contact-showrooms {
  padding-top: var(--space-5);
  border-top: 1px solid var(--accent-3);
}

.contact-showrooms h3 {
  margin: 0 0 var(--space-3);
  color: var(--text-heading);
  font-size: var(--text-lg);
}

.contact-showrooms ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.contact-form-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7);
}

.contact-form-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.contact-form-heading > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  font-size: var(--text-3xl);
}

.contact-form-heading h2 {
  margin: var(--space-1) 0 var(--space-1);
  color: var(--text-heading);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  line-height: var(--leading-title);
}

.contact-form-heading p:not(.eyebrow) {
  margin: 0;
  color: var(--text-secondary);
}

.contact-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.contact-field-grid label,
.contact-wide-field {
  display: grid;
  gap: var(--space-2);
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
}

.contact-field-grid input,
.contact-field-grid select,
.contact-wide-field textarea,
.contact-wide-field input[type="file"]:not(.sr-only) {
  width: 100%;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--text-heading);
  font: inherit;
  font-weight: var(--font-medium);
  outline: 0;
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease, background var(--duration-normal) ease;
}

.contact-field-grid input,
.contact-field-grid select {
  min-height: 48px;
  padding: 0 var(--space-3);
}

.contact-wide-field textarea {
  min-height: 150px;
  padding: var(--space-3);
  resize: vertical;
}

.contact-field-grid input:focus,
.contact-field-grid select:focus,
.contact-wide-field textarea:focus,
.contact-wide-field input[type="file"]:not(.sr-only):focus {
  border-color: var(--accent-alt);
  box-shadow: 0 0 0 4px rgba(var(--color-orange-500-rgb), 0.12);
  background: var(--color-white);
}

.contact-file-field input[type="file"]:not(.sr-only) {
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
}

.contact-file-field input[type="file"]:not(.sr-only)::file-selector-button {
  margin-right: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--background-alt);
  color: var(--text-heading);
  font: inherit;
  font-weight: var(--font-extrabold);
  cursor: pointer;
}

.contact-file-field small,
.field-help {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-body);
}

.contact-file-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.contact-file-control .btn {
  margin: 0;
}

.quote-check-grid label[hidden] {
  display: none !important;
}

.contact-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--background-alt);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.contact-consent input {
  margin-top: var(--space-1);
  accent-color: var(--accent-alt);
}

.contact-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.contact-form-actions [hidden],
.contact-origin-note[hidden],
.contact-status[hidden] {
  display: none;
}

.contact-status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--color-success-650-rgb), 0.2);
  border-radius: var(--radius-sm);
  background: rgba(var(--color-success-650-rgb), 0.08);
  color: var(--color-success-700);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.contact-branches-section {
  padding: var(--space-16) 0 var(--space-18);
  background: var(--color-white);
  border-top: 1px solid var(--accent-3);
}

.contact-branches-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.branch-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--background-alt);
  box-shadow: var(--shadow-1);
}

.branch-card > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
}

.branch-card h3 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-lg);
}

.branch-card p {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.branch-card small {
  display: block;
  margin-top: var(--space-2);
  color: var(--accent-4);
  font-size: var(--text-xs);
  font-weight: var(--font-extrabold);
}

.branch-card .btn {
  min-width: 132px;
  padding-inline: var(--space-4);
}

.contact-support-section {
  padding: var(--space-17) 0 var(--space-21);
  background: var(--background-alt);
}

.contact-support-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.contact-promotions-section {
  padding: clamp(var(--space-18), 8vw, var(--space-27)) 0 clamp(var(--space-21), 9vw, var(--space-30));
  border-top: 1px solid var(--accent-3);
  background: var(--color-white);
}

.contact-promotions-heading {
  gap: 0;
}

.contact-promotions-heading h2 {
  margin: 0;
  color: var(--text-heading);
  font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
  line-height: var(--leading-display);
  text-wrap: balance;
}

.contact-promotions-heading p {
  max-width: 52ch;
  margin: var(--heading-subtitle-gap) auto var(--heading-action-gap);
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.contact-promotions-heading .btn {
  min-width: 180px;
}

.blog-section {
  padding: var(--space-18) 0 var(--space-21);
  background: var(--background-alt);
}

.blog-section h2 {
  color: var(--text-heading);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.blog-card {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.blog-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--color-orange-500-rgb), 0.48);
  box-shadow: var(--shadow-2);
}

.blog-card-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 1.45;
  background: var(--surface);
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.04);
}

.blog-card-body {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
}

.blog-card time {
  color: var(--accent-alt);
  font-size: var(--text-xs);
  font-weight: var(--font-extrabold);
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}

.blog-card h3 a {
  color: inherit;
}

.blog-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

@media (max-width: 980px) {
  .header-search {
    max-width: none;
  }

  .commerce-benefits {
    margin-top: 0;
    padding-top: var(--space-5);
  }

  .commerce-benefits-grid,
  .quote-panel {
    grid-template-columns: 1fr 1fr;
  }

  .quote-section {
    padding: var(--space-18) 0 var(--space-21);
  }

  .quote-panel {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    min-height: 0;
    padding: var(--space-9);
  }

  .commerce-benefits-grid > div:nth-child(2) {
    border-right: 0;
  }

  .commerce-benefits-grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--accent-3);
  }

  .home-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .quote-copy,
  .quote-visual,
  .quote-steps {
    grid-column: 1 / -1;
  }

  .quote-visual {
    justify-items: stretch;
  }

  .quote-visual-card {
    width: 100%;
  }

  .quote-steps::before {
    display: none;
  }

  .location-grid {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-info-panel {
    position: static;
  }

  .contact-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-branches-grid {
    grid-template-columns: 1fr;
  }

  .location-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .site-header > .header-nav .category-nav-inner {
    justify-content: flex-start;
  }

  .header-search-row {
    padding-bottom: var(--space-3);
  }

  .sitemap-hero,
  .hero-slide-content {
    min-height: 600px;
  }

  .hero-slide-content {
    padding-top: var(--space-53);
  }

  .hero-arrow {
    width: 44px;
    height: 44px;
  }

  .hero-controls {
    gap: 0;
  }

  .hero-controls button,
  .hero-controls button.is-active {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .hero-controls button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(var(--color-white-rgb), 0.74);
    border-radius: var(--radius-round);
    background: rgba(var(--color-white-rgb), 0.2);
    content: "";
    transform: translate(-50%, -50%);
    transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease, transform var(--duration-normal) ease;
  }

  .hero-controls button.is-active::before {
    border-color: var(--accent-alt);
    background: var(--accent-alt);
    transform: translate(-50%, -50%) scale(1.18);
  }

  .hero-arrow-prev {
    left: 18px;
  }

  .hero-arrow-next {
    right: 18px;
  }

  .home-map-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .solution-grid {
    grid-template-columns: 1fr;
  }

  .commerce-benefits-grid,
  .quote-panel,
  .quote-steps {
    grid-template-columns: 1fr;
  }

  .quote-section {
    padding: var(--space-14) 0 var(--space-16);
  }

  .quote-panel {
    padding: var(--space-6);
  }

  .quote-steps > div {
    min-height: 0;
    padding: var(--space-5);
  }

  .quote-copy h2 {
    font-size: var(--text-4xl);
  }

  .quote-page-section {
    padding: var(--space-9) 0 var(--space-6);
  }

  .quote-page-intro,
  .quote-form-card,
  .quote-summary-card {
    padding: var(--space-5);
  }

  .contact-page-section {
    padding: var(--space-9) 0 var(--space-12);
  }

  .contact-info-panel,
  .contact-form-card {
    padding: var(--space-5);
  }

  .contact-form-heading {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .contact-form-heading > .material-symbols-outlined {
    width: 40px;
    height: 40px;
    font-size: var(--text-2xl);
  }

  .contact-field-grid,
  .contact-branches-grid,
  .contact-support-grid {
    grid-template-columns: 1fr;
  }

  .branch-card {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .branch-card > .material-symbols-outlined {
    width: 42px;
    height: 42px;
  }

  .branch-card .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .contact-form-actions,
  .contact-form-actions .btn {
    width: 100%;
  }

  .quote-form-heading {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .quote-form-heading > span {
    width: 38px;
    height: 38px;
  }

  .quote-copy p:not(.eyebrow) {
    font-size: var(--text-base);
  }

  .quote-actions,
  .quote-actions .btn {
    width: 100%;
  }

  .quote-values {
    grid-template-columns: 1fr;
  }

  .commerce-benefits-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--accent-3);
  }

  .commerce-benefits-grid > div:last-child {
    border-bottom: 0;
  }

  .location-actions,
  .location-actions .btn {
    width: 100%;
  }
}

@keyframes quoteTimelineProgressVertical {
  0%, 10% { transform: scaleY(0); }
  30% { transform: scaleY(0.34); }
  55% { transform: scaleY(0.67); }
  80%, 100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .quote-timeline::after,
  .quote-timeline-step,
  .quote-step-number {
    animation: none;
  }

  .quote-timeline::after {
    transform: scaleX(1);
  }
}

.corporate-link {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid currentColor;
  border-radius: var(--radius-round);
  background: rgba(var(--color-white-rgb), 0.94);
}

/* Header compartido: bloque blanco en flujo antes del hero en todas las pantallas. */
.has-transparent-header .site-header,
.has-transparent-header .site-header.is-scrolled {
  position: sticky;
  left: auto;
  right: auto;
  background: rgba(var(--color-white-rgb), 0.98);
  border-bottom: 1px solid rgba(var(--color-navy-900-rgb), 0.1);
  box-shadow: var(--elevation-subtle);
  color: var(--text-heading);
  transition: background-color var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard);
}

.site-header .top-strip {
  display: none;
}

.has-transparent-header .header-main,
.has-transparent-header .site-header.is-scrolled .header-main {
  min-height: 76px;
  padding-block: var(--space-3);
}

.has-transparent-header .brand-logo-white,
.has-transparent-header .site-header.is-scrolled .brand-logo-white {
  opacity: 0;
}

.has-transparent-header .brand-logo-blue,
.has-transparent-header .site-header.is-scrolled .brand-logo-blue {
  opacity: 1;
}

.has-transparent-header .brand-logo img,
.has-transparent-header .site-header.is-scrolled .brand-logo img {
  filter: none;
}

.has-transparent-header .category-nav-inner a,
.has-transparent-header .site-header.is-scrolled .category-nav-inner a {
  color: var(--text-heading);
}

.has-transparent-header .main-actions,
.has-transparent-header .site-header.is-scrolled .main-actions {
  display: flex;
}

.has-transparent-header .main-actions .icon-link,
.has-transparent-header .site-header.is-scrolled .main-actions .icon-link {
  border-color: var(--accent-4);
  background: var(--color-white);
  color: var(--accent-4);
  box-shadow: none;
}

.has-transparent-header .main-actions .icon-link:hover,
.has-transparent-header .site-header.is-scrolled .main-actions .icon-link:hover {
  border-color: var(--accent-alt);
  background: rgba(var(--color-orange-500-rgb), 0.08);
}

body:not(.home-page) .page-hero.image-hero {
  padding-top: var(--space-12);
}

body:not(.home-page) .page-hero.image-hero.gt-hero-half {
  min-height: 170px;
  padding: var(--space-18) 0 var(--space-6);
}

.gt-page-title-only { padding-block: var(--space-10) var(--space-4); }
.gt-page-title-only h1 { margin: 0; }

@media (max-width: 980px) {
  .has-transparent-header .mobile-menu-toggle,
  .has-transparent-header .site-header.is-scrolled .mobile-menu-toggle {
    border-color: rgba(var(--color-navy-900-rgb), 0.16);
    background: var(--color-white);
    color: var(--accent-4);
  }
}

/* Estado de ubicación actual en la navegación principal. */
.site-header .category-nav-inner > a,
.site-header .nav-dropdown > summary {
  position: relative;
}

.site-header .category-nav-inner > a.is-active,
.site-header .nav-dropdown.is-active > summary,
.site-header .nav-dropdown > summary.is-active {
  color: var(--accent-alt);
  font-weight: var(--font-bold);
}

.site-header .category-nav-inner > a.is-active::before,
.site-header .nav-dropdown.is-active > summary::before,
.site-header .nav-dropdown > summary.is-active::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 3px;
  border-radius: var(--radius-1);
  background: var(--accent-alt);
}

@media (max-width: 980px) {
  .site-header .category-nav-inner > a.is-active::before,
  .site-header .nav-dropdown.is-active > summary::before,
  .site-header .nav-dropdown > summary.is-active::before {
    top: 10px;
    right: auto;
    bottom: 10px;
    left: -8px;
    width: 3px;
    height: auto;
  }
}

@media (max-width: 640px) {
  body:not(.home-page) .page-hero.image-hero {
    padding-top: var(--space-8);
  }

  body:not(.home-page) .page-hero.image-hero.gt-hero-half {
    min-height: 125px;
    padding: var(--space-13) 0 var(--space-4);
  }
}

.corporate-link img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.has-transparent-header .site-header.is-scrolled {
  background: rgba(var(--color-navy-900-rgb), 0.97);
  border-bottom-color: rgba(var(--color-white-rgb), 0.18);
  box-shadow: var(--elevation-card);
  color: var(--color-white);
}

.has-transparent-header .site-header.is-scrolled .top-strip {
  background: transparent;
  border-bottom-color: rgba(var(--color-white-rgb), 0.16);
  color: var(--color-white);
}

.has-transparent-header .site-header.is-scrolled .brand-logo-white {
  opacity: 1;
}

.has-transparent-header .site-header.is-scrolled .brand-logo-blue {
  opacity: 0;
}

.has-transparent-header .site-header.is-scrolled .category-nav-inner a,
.has-transparent-header .site-header.is-scrolled .main-actions .icon-link {
  color: var(--color-white);
}

.has-transparent-header .site-header.is-scrolled .main-actions .icon-link {
  border-color: rgba(var(--color-white-rgb), 0.52);
  background: rgba(var(--color-white-rgb), 0.08);
  box-shadow: none;
}

.has-transparent-header .site-header.is-scrolled .main-actions .icon-link:hover {
  border-color: var(--color-white);
  background: rgba(var(--color-white-rgb), 0.16);
}

.has-transparent-header .site-header.is-scrolled .mobile-menu-toggle {
  border-color: rgba(var(--color-white-rgb), 0.5);
  color: var(--color-white);
}

.solutions-showcase {
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-14);
  border-bottom: 1px solid var(--accent-3);
  background: var(--color-white);
  text-align: center;
}

.solutions-showcase .section-heading {
  justify-content: center;
  margin-bottom: var(--space-5);
}

.solutions-showcase h2 {
  color: var(--text-heading);
  font-size: var(--section-title-size);
}

.solutions-showcase h2 span {
  color: var(--accent-alt);
}

.solutions-showcase > img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}

.solutions-showcase-action {
  margin-top: var(--space-6);
}

.conditions-list {
  display: grid;
  gap: var(--space-3);
}

.conditions-list details {
  overflow: hidden;
  border: 1px solid rgba(var(--color-orange-500-rgb), 0.34);
  border-radius: var(--radius-2);
  background: var(--color-white);
}

.conditions-list summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  background: rgba(var(--color-orange-500-rgb), 0.16);
  color: var(--text-heading);
  cursor: pointer;
  font-weight: var(--font-bold);
  list-style: none;
}

.conditions-list summary::-webkit-details-marker {
  display: none;
}

.conditions-list summary .material-symbols-outlined {
  color: var(--accent-alt);
  transition: transform var(--duration-normal) ease;
}

.conditions-list details[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.conditions-list p {
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  color: var(--text-secondary);
}

.footer-bottom > div {
  flex-wrap: wrap;
}

.footer-bottom span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

@media (max-width: 980px) {
  .has-transparent-header .site-header.is-scrolled .header-main .header-nav {
    background: var(--accent-4);
  }

  .solutions-showcase > img {
    width: 132%;
    max-width: none;
    margin-left: -16%;
  }
}

@media (max-width: 640px) {
  .corporate-link {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .corporate-link img {
    width: 27px;
    height: 27px;
  }

  .solutions-showcase {
    padding-block: var(--space-11);
  }

  .solutions-showcase > img {
    width: 190%;
    margin-left: -45%;
  }
}

/* ============================================================
   Inventario interno de estados WooCommerce
   ============================================================ */
.states-page {
  background: var(--color-neutral-50);
}

.states-header {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  border-bottom: 1px solid rgba(var(--color-white-rgb), .14);
  background: var(--accent-4);
  color: var(--text-on-dark);
  box-shadow: 0 10px 28px rgba(var(--color-navy-900-rgb), .18);
}

.states-header-inner {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr auto;
  gap: var(--space-6);
  min-height: 76px;
  align-items: center;
}

.states-header img {
  display: block;
  width: 180px;
  max-height: 44px;
}

.states-header-inner > div {
  display: grid;
  gap: var(--space-1);
}

.states-header-inner span {
  color: rgba(var(--color-white-rgb), .68);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.states-header-inner strong {
  font-family: var(--font-heading);
}

.states-header .btn-secondary {
  border-color: rgba(var(--color-white-rgb), .42);
  background: transparent;
  color: var(--color-white);
}

.states-intro {
  padding: var(--space-18) 0 var(--space-14);
  background: linear-gradient(120deg, rgba(var(--color-navy-900-rgb), .96), rgba(var(--color-blue-800-rgb), .90)),
    url("../images/home/glasstech-hero.png") center/cover;
  color: var(--color-white);
}

.states-intro h1 {
  max-width: 820px;
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-8xl));
  line-height: var(--leading-none);
}

.states-intro > .container > p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: rgba(var(--color-white-rgb), .82);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

.states-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.states-index a {
  min-height: 42px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(var(--color-white-rgb), .28);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-white-rgb), .08);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.states-section {
  padding: var(--space-17) 0;
  scroll-margin-top: var(--space-22);
}

.states-section-alt {
  border-block: 1px solid var(--border);
  background: var(--color-white);
}

.states-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 480px);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-7);
}

.states-section-heading .eyebrow {
  margin-bottom: var(--space-1);
}

.states-section-heading h2 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
}

.states-section-heading > p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.state-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.state-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.state-card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  min-height: 270px;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.states-section-alt .state-card {
  background: var(--color-neutral-50);
}

.state-card h3 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}

.state-card > p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.state-card > .btn {
  align-self: end;
  margin-top: auto;
}

.state-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
}

.state-card code {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-2);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
}

.state-badge {
  display: inline-flex;
  width: max-content;
  min-height: 26px;
  padding: var(--space-2) var(--space-2);
  align-items: center;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--font-extrabold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.state-success { background: rgba(var(--color-success-600-rgb), .12); color: var(--color-success-600); }
.state-warning { background: rgba(var(--color-warning-400-rgb), .16); color: var(--color-warning-700); }
.state-danger { background: rgba(var(--color-danger-500-rgb), .12); color: var(--color-danger-800); }
.state-info { background: rgba(var(--color-blue-500-rgb), .12); color: var(--color-blue-600); }
.state-neutral { background: rgba(var(--color-bluegray-700-rgb), .12); color: var(--accent-4); }

.state-price {
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
}

.state-notice {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-3);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(var(--color-blue-500-rgb), .08);
  color: var(--text-primary);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.state-notice-warning {
  border-left-color: var(--color-warning-500);
  background: rgba(var(--color-warning-400-rgb), .10);
}

.state-notice .material-symbols-outlined,
.field-error .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: var(--text-lg);
}

.field-error {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-danger-800);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.state-card :is(input, select)[aria-invalid="true"] {
  border-color: var(--color-danger-500);
  box-shadow: 0 0 0 2px rgba(var(--color-danger-500-rgb), .08);
}

.state-loading {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 82px;
}

.state-loading > span {
  width: 34px;
  height: 34px;
  border: 3px solid var(--accent-3);
  border-top-color: var(--accent-alt);
  border-radius: var(--radius-round);
  animation: stateSpinner var(--duration-slow) linear infinite;
}

.state-loading p {
  margin: 0;
  color: var(--text-secondary);
}

@keyframes stateSpinner {
  to { transform: rotate(360deg); }
}

.state-summary {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.state-summary div {
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.state-summary dt {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.state-summary dd {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-align: right;
}

.state-empty {
  justify-items: center;
  align-content: center;
  text-align: center;
}

.state-empty > .material-symbols-outlined {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--surface);
  color: var(--accent);
  font-size: var(--text-4xl);
}

.state-status-card {
  justify-items: start;
}

.state-status-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: var(--radius-round);
  font-size: var(--text-4xl);
}

.state-status-success { background: rgba(var(--color-success-600-rgb), .12); color: var(--color-success-600); }
.state-status-warning { background: rgba(var(--color-warning-400-rgb), .16); color: var(--color-warning-700); }
.state-status-danger { background: rgba(var(--color-danger-500-rgb), .12); color: var(--color-danger-800); }

.state-order-timeline {
  width: 100%;
  margin: 0;
}

.states-footer {
  padding: var(--space-6) 0;
  background: var(--accent-4);
  color: var(--text-on-dark-muted);
}

.states-footer > .container {
  display: flex;
  gap: var(--space-5);
  justify-content: space-between;
  align-items: center;
}

.states-footer p {
  margin: 0;
  color: inherit;
  font-size: var(--text-xs);
}

.states-footer a {
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

@media (max-width: 1100px) {
  .state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .states-header-inner {
    grid-template-columns: 1fr auto;
    min-height: 70px;
  }

  .states-header-inner > div {
    display: none;
  }

  .states-header img {
    width: 150px;
  }

  .states-header .btn {
    width: auto;
    min-height: 42px;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-xs);
  }

  .states-intro {
    padding: var(--space-13) 0 var(--space-10);
  }

  .states-intro h1 {
    font-size: var(--text-5xl);
  }

  .states-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .states-section {
    padding: var(--space-12) 0;
  }

  .states-section-heading,
  .state-grid,
  .state-grid-three,
  .state-grid-two {
    grid-template-columns: 1fr;
  }

  .states-section-heading {
    gap: var(--space-3);
  }

  .state-card {
    min-height: 0;
  }

  .states-footer > .container {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 980px) {
  .quote-timeline {
    grid-template-columns: 1fr;
  }

  .quote-timeline::before,
  .quote-timeline::after {
    top: 48px;
    left: 42px;
    right: auto;
    bottom: 48px;
    width: 3px;
    height: auto;
    transform-origin: top;
  }

  .quote-timeline::after {
    animation-name: quoteTimelineProgressVertical;
  }

  .quote-timeline-step {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    min-height: 0;
  }

  .quote-timeline-step .material-symbols-outlined {
    grid-column: 1;
  }

  .quote-timeline-step strong,
  .quote-timeline-step small {
    grid-column: 2;
  }
}

/* Ajuste header: acciones arriba y buscador como CTA bajo hero */
.top-strip {
  padding: 0;
}

.top-strip-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: center;
  min-height: 34px;
  padding-block: var(--space-2);
}

.top-strip-inner p {
  margin: 0;
  text-align: left;
}

.top-actions {
  gap: var(--space-5);
  font-size: var(--text-xs);
}

.top-actions a {
  color: inherit;
}

.top-actions .cart-link span:not(.material-symbols-outlined),
.main-actions .cart-link span:not(.material-symbols-outlined) {
  display: inline;
  min-width: 0;
  height: auto;
  margin-left: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.top-actions .cart-link .material-symbols-outlined,
.main-actions .cart-link .material-symbols-outlined {
  display: inline-flex;
  min-width: 0;
  height: auto;
  margin-left: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: var(--text-lg);
}

.top-actions .icon-link {
  min-height: 28px;
}

.top-actions .material-symbols-outlined {
  font-size: var(--text-lg);
}

.top-actions .cart-link em {
  min-width: var(--header-cart-count-size);
  height: var(--header-cart-count-size);
  font-size: var(--header-cart-count-font-size);
}

.header-main {
  grid-template-columns: minmax(160px, 250px) minmax(0, 1fr) auto;
}

.header-main .header-nav {
  justify-self: end;
}

.header-main .category-nav-inner {
  justify-content: flex-end;
}

.main-actions {
  display: flex;
  gap: var(--space-4);
}

.main-actions .cart-link em {
  display: inline-grid;
  place-items: center;
  min-width: var(--header-cart-count-size);
  height: var(--header-cart-count-size);
  margin-left: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: var(--header-cart-count-font-size);
  font-style: normal;
  font-weight: var(--font-bold);
}

.has-transparent-header .main-actions {
  display: none;
}

.has-transparent-header .site-header.is-scrolled .main-actions {
  display: flex;
}

.has-transparent-header .site-header.is-scrolled .header-main {
  grid-template-columns: minmax(160px, 250px) minmax(0, 1fr) minmax(96px, auto);
}

.has-transparent-header .site-header.is-scrolled .header-main .header-nav {
  justify-self: center;
}

.has-transparent-header .site-header.is-scrolled .header-main .category-nav-inner {
  justify-content: center;
}

.has-transparent-header .site-header.is-scrolled .main-actions {
  justify-self: start;
  justify-content: flex-start;
}

.main-actions .icon-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(var(--color-navy-900-rgb), 0.12);
  border-radius: var(--radius-pill);
  background: rgba(var(--color-white-rgb), 0.82);
  color: var(--accent-4);
  box-shadow: var(--elevation-card);
  transition: border-color var(--duration-normal) ease, color var(--duration-normal) ease, background var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.main-actions .icon-link:hover {
  border-color: var(--accent-alt);
  color: var(--accent-alt);
  background: var(--color-white);
  box-shadow: 0 12px 24px rgba(var(--color-navy-900-rgb), 0.10);
  transform: translateY(-1px);
}

.main-actions .icon-link span:not(.material-symbols-outlined) {
  display: none;
}

.main-actions .icon-link .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  color: inherit;
  font-size: var(--text-2xl);
}

.main-actions .cart-link em {
  position: absolute;
  top: var(--header-cart-count-offset);
  right: var(--header-cart-count-offset);
  min-width: var(--header-cart-count-size);
  height: var(--header-cart-count-size);
  margin: 0;
  border: var(--header-cart-count-border);
  font-size: var(--header-cart-count-font-size);
  line-height: var(--header-cart-count-line-height);
  box-shadow: var(--header-cart-count-shadow);
}

.home-search-cta {
  position: relative;
  z-index: var(--z-control);
  padding: 0 0 var(--space-11);
  margin-top: calc(-1 * var(--space-9));
  background: var(--color-white);
}

.shop-benefits {
  background: transparent;
  margin-top: calc(-1 * var(--space-8));
  padding-bottom: var(--space-7);
}

.shop-benefits + .home-search-cta {
  margin-top: calc(-1 * var(--space-9));
}

.filters-panel .shop-search-form {
  min-height: 48px;
  border-color: rgba(var(--color-blue-500-rgb), 0.28);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 12px 26px rgba(var(--color-navy-900-rgb), 0.08);
}

.filters-panel .shop-search-form:focus-within {
  border-color: var(--accent-alt);
  box-shadow: 0 16px 30px rgba(var(--color-orange-500-rgb), 0.14);
}

.filters-panel .shop-search-form input {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

.filters-panel .shop-search-form button {
  display: grid;
  place-items: center;
  min-width: 48px;
  padding: 0;
  background: var(--accent-alt);
}

.home-search-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: stretch;
  padding: clamp(var(--space-6), 3.4vw, var(--space-10));
  border: 1px solid rgba(var(--color-blue-500-rgb), 0.22);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(var(--color-white-rgb), 0.98), rgba(var(--color-blue-50-rgb), 0.98)),
    linear-gradient(90deg, rgba(var(--color-navy-900-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--color-navy-900-rgb), 0.04) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  box-shadow: var(--elevation-overlay);
}

.home-search-panel .eyebrow {
  margin-bottom: var(--space-1);
}

.home-search-panel h2 {
  max-width: 820px;
  color: var(--text-heading);
  font-size: clamp(var(--text-2xl), 2.7vw, var(--text-4xl));
  line-height: var(--leading-display);
}

.home-search-form {
  width: 100%;
  min-height: 72px;
  border-color: rgba(var(--color-blue-500-rgb), 0.34);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--elevation-raised);
}

.home-search-form:focus-within {
  border-color: var(--accent-alt);
  box-shadow: 0 22px 46px rgba(var(--color-orange-500-rgb), 0.18);
}

.home-search-form input {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
}

.home-search-form button {
  display: grid;
  place-items: center;
  min-width: 78px;
  background: var(--accent-alt);
}

@media (max-width: 980px) {
  .header-main {
    grid-template-columns: 1fr;
  }

  .header-main .header-nav,
  .header-main .category-nav-inner {
    justify-self: stretch;
    justify-content: flex-start;
  }

  .mega-menu-item {
    display: inline-flex;
  }

  .mega-menu {
    position: fixed;
    top: 104px;
    left: 12px;
    right: 12px;
    width: auto;
    padding-top: var(--space-6);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    visibility: hidden;
  }

  .mega-menu::before {
    top: 0;
    height: 30px;
    display: block;
  }

  .mega-menu-item:hover .mega-menu,
  .mega-menu-item:focus-within .mega-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .mega-menu-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .mega-menu-feature {
    grid-column: 1 / -1;
    min-height: 150px;
  }

  .main-actions {
    justify-content: space-between;
  }

  .home-search-panel {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  .home-page .top-strip {
    display: block;
  }

  .top-strip-inner {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
    text-align: left;
  }

  .top-actions {
    justify-content: space-between;
  }

  .home-search-cta {
    margin-top: 0;
    padding: var(--space-4) 0 var(--space-9);
  }

  .home-search-panel {
    padding: var(--space-5);
  }

  .shop-hero {
    min-height: 680px;
  }
}

/* Imagenes temporales reutilizadas para evitar placeholders vacios. */
.media-shower {
  background-image: url("../images/categories/showerdoors.png");
}

.media-mirror,
.media-antifog {
  background-image: url("../images/categories/espejos.png");
}

.media-board {
  background-image: url("../images/categories/pizarras.png");
}

.media-cover,
.media-table {
  background-image: url("../images/categories/cubiertas.png");
}

.media-kit {
  background-image: url("../images/home/glasstech-hero.png");
}

.media-shower,
.media-mirror,
.media-board,
.media-cover,
.media-antifog,
.media-table,
.media-kit {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Iteración UX: navegación mobile, objetivos táctiles y checkout claro. */
.mobile-menu-toggle {
  display: none;
}

.mobile-filter-toggle,
.mobile-filter-close,
.mobile-filter-overlay {
  display: none;
}

.mobile-filter-actions {
  display: block;
  margin-top: var(--space-5);
}

.shop-page .mobile-filter-actions .btn {
  min-height: 42px;
  border-color: var(--accent-alt);
  background: var(--color-white);
  color: var(--accent-alt);
}

.shop-page .mobile-filter-actions .btn:hover,
.shop-page .mobile-filter-actions .btn:focus-visible {
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
}

.checkout-form > h2 {
  margin: 0 0 var(--space-5);
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-4xl));
  line-height: var(--leading-title);
}

.checkout-price-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-left: 3px solid var(--accent-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(var(--color-orange-500-rgb), 0.08);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

.checkout-price-note strong {
  color: var(--text-heading);
}

@media (min-width: 981px) {
  .checkout-summary {
    position: sticky;
    top: 132px;
  }
}

@media (max-width: 980px) {
  .site-header .top-strip {
    display: none;
  }

  .site-header .header-main,
  .has-transparent-header .site-header.is-scrolled .header-main {
    display: grid;
    grid-template-columns: minmax(132px, 1fr) auto auto;
    gap: var(--space-3);
    min-height: 72px;
    padding-block: var(--space-3);
    align-items: center;
  }

  .site-header .brand-logo {
    width: min(190px, 100%);
  }

  .site-header .brand-logo img {
    max-height: 38px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 48px;
    min-height: 48px;
    padding: 0 var(--space-3);
    border: 1px solid rgba(var(--color-white-rgb), 0.34);
    border-radius: var(--radius-pill);
    background: rgba(var(--color-white-rgb), 0.12);
    color: var(--color-white);
    font: var(--font-bold) var(--text-xs) var(--font-body);
  }

  .site-header.is-scrolled .mobile-menu-toggle,
  body:not(.has-transparent-header) .mobile-menu-toggle {
    border-color: rgba(var(--color-navy-900-rgb), 0.16);
    background: var(--color-white);
    color: var(--accent-4);
  }

  .site-header .header-main .header-nav {
    position: fixed;
    inset: 72px 0 auto;
    z-index: var(--z-overlay);
    display: block;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: var(--space-4) var(--space-5) var(--space-6);
    border-top: 1px solid rgba(var(--color-white-rgb), 0.15);
    background: var(--accent-4);
    box-shadow: 0 18px 36px rgba(var(--color-navy-900-rgb), 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease, visibility var(--duration-normal) ease;
  }

  .site-header.mobile-menu-open .header-main .header-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .site-header .header-main .category-nav-inner {
    display: grid;
    gap: var(--space-1);
  }

  .site-header .header-main .category-nav-inner > a,
  .site-header .header-main .mega-menu-trigger {
    display: flex;
    min-height: 48px;
    padding: var(--space-3) var(--space-3);
    align-items: center;
    color: var(--color-white);
    font-size: var(--text-base);
  }

  .site-header .header-main .category-nav-inner a.is-active {
    color: var(--accent-alt);
  }

  .site-header .mega-menu {
    display: none;
  }

  .site-header .main-actions,
  .has-transparent-header .main-actions,
  .has-transparent-header .site-header.is-scrolled .main-actions {
    display: flex;
    grid-column: 3;
    gap: var(--space-2);
    justify-self: end;
  }

  .site-header .main-actions .icon-link {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }

  .mobile-navigation-open {
    overflow: hidden;
  }

  .mobile-filter-toggle {
    display: inline-flex;
    width: max-content;
    min-height: 46px;
    margin-bottom: var(--space-4);
    align-items: center;
    gap: var(--space-2);
  }

  .mobile-filter-toggle em {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--accent-alt);
    color: var(--text-on-accent-alt);
    font-size: var(--text-xs);
    font-style: normal;
  }

  .mobile-filter-toggle em[hidden] {
    display: none;
  }

  .filters-panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-modal-content);
    width: min(420px, calc(100% - 34px));
    max-height: 100dvh;
    overflow-y: auto;
    padding: var(--space-5) var(--space-5) var(--space-23);
    border: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: 22px 0 54px rgba(var(--color-navy-900-rgb), 0.24);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform var(--duration-normal) ease, visibility var(--duration-normal) ease;
  }

  .filters-panel.is-mobile-open {
    transform: translateX(0);
    visibility: visible;
  }

  .filters-panel .panel-header {
    position: sticky;
    top: -18px;
    z-index: var(--z-control);
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    border-bottom: 1px solid var(--border);
  }

  .mobile-filter-close {
    display: inline-grid;
    width: 44px;
    height: 44px;
    margin-left: auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--text-heading);
  }

  .mobile-filter-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    display: block;
    border: 0;
    background: rgba(var(--color-navy-900-rgb), 0.58);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease;
  }

  .mobile-filter-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .mobile-filter-actions {
    position: fixed;
    z-index: var(--z-floating);
    left: 0;
    bottom: 0;
    display: block;
    width: min(420px, calc(100% - 34px));
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--color-white);
    box-shadow: 0 -10px 24px rgba(var(--color-navy-900-rgb), 0.08);
  }

  .mobile-filters-open {
    overflow: hidden;
  }

  .category-nav-inner a,
  .footer-column a,
  .footer-contact a,
  .footer-social a,
  .cart-qty-control button,
  .link-button {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .mobile-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-header .header-main,
  .has-transparent-header .site-header.is-scrolled .header-main {
    grid-template-columns: minmax(118px, 1fr) 48px 48px;
    padding-inline: var(--space-3);
  }

  .site-header .main-actions .account-link {
    display: none;
  }

  .has-transparent-header .hero-slide-content {
    padding-top: var(--space-30);
  }

  body:has(.pdp-mobile-buybar) .whatsapp-float {
    bottom: 88px;
    right: 14px;
  }

  .pdp-mobile-buybar {
    min-height: 76px;
    padding: var(--space-3) var(--space-3);
  }
}

/* Hero alto solo en Inicio; cabeceras interiores más compactas. */
body:not(.home-page) .page-hero.image-hero {
  min-height: 340px;
  padding: var(--space-35) 0 var(--space-12);
}

body:not(.home-page) .page-hero.image-hero .section-hero-content {
  gap: var(--heading-subtitle-gap);
}

body:not(.home-page) .page-hero.image-hero .section-hero-content h1 {
  max-width: 680px;
  font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
}

body:not(.home-page) .page-hero.image-hero .section-hero-content p:not(.eyebrow) {
  max-width: 620px;
  font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
}

@media (max-width: 640px) {
  body:not(.home-page) .page-hero.image-hero {
    min-height: 250px;
    padding: var(--space-26) 0 var(--space-8);
  }

  body:not(.home-page) .page-hero.image-hero .section-hero-content h1 {
    font-size: clamp(var(--text-3xl), 9vw, var(--text-5xl));
  }

  body:not(.home-page) .page-hero.image-hero .section-hero-content p:not(.eyebrow) {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
  }
}

/* Inicio: replica la animación secuencial de "Cómo funciona" del cotizador. */
.home-quote-timeline {
  --timeline-duration: 6s;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-quote-timeline::before,
.home-quote-timeline::after {
  top: 45px;
  left: calc(16.666% + 22px);
  right: calc(16.666% + 22px);
}

.home-quote-timeline .quote-timeline-step {
  align-content: start;
}

.home-quote-timeline .quote-step-number {
  margin-bottom: 0;
}

/* Ajustes P0 posteriores a auditoría: jerarquía, cuenta mobile y foco. */
.detail-copy > h2,
.confirmation-card > h2,
.account-heading > h2 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  line-height: var(--leading-display);
}

.confirmation-title {
  color: var(--accent-4);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(var(--color-orange-500-rgb), 0.92);
  outline-offset: 3px;
}

.account-dashboard,
.account-menu,
.account-main,
.account-welcome,
.account-block,
.account-two-cols {
  min-width: 0;
  max-width: 100%;
}

.account-user > div,
.account-block-header > div {
  min-width: 0;
}

.account-user > div {
  display: grid;
  gap: var(--space-1);
}

.account-user small,
.account-details-list dd,
.account-block p {
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .home-quote-timeline {
    grid-template-columns: 1fr;
  }

  .home-quote-timeline::before,
  .home-quote-timeline::after {
    top: 46px;
    left: 42px;
    right: auto;
    bottom: 46px;
  }

  .home-quote-timeline .quote-timeline-step {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 128px;
  }

  .home-quote-timeline .quote-step-number {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .home-quote-timeline .quote-timeline-step strong,
  .home-quote-timeline .quote-timeline-step small {
    grid-column: 2;
  }

  .account-dashboard {
    width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .account-section {
    overflow: hidden;
  }

  .account-menu,
  .account-main,
  .account-welcome,
  .account-block {
    width: 100%;
  }

  .account-user {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: var(--space-4);
  }

  .account-welcome,
  .account-block {
    padding: var(--space-5);
  }

  .account-summary-grid > div {
    padding: var(--space-4);
  }

  .account-orders-table {
    overflow-x: auto;
  }

  .home-page .location-section,
  .home-page .useful-section,
  .home-page .services-section,
  .home-page .blog-section {
    padding-block: var(--space-11);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: var(--duration-reduced) !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: var(--duration-reduced) !important;
  }
}

.home-page .top-strip {
  display: none;
}

.home-page .header-main {
  min-height: 76px;
  padding-block: var(--space-3);
}

.home-page .site-header:not(.is-scrolled) {
  background: rgba(var(--color-white-rgb), 0.96);
  border-bottom-color: transparent;
  color: var(--text-heading);
}

.home-page .site-header:not(.is-scrolled) .brand-logo-white {
  opacity: 0;
}

.home-page .site-header:not(.is-scrolled) .brand-logo-blue {
  opacity: 1;
}

.home-page .site-header:not(.is-scrolled) .brand-logo img {
  filter: none;
}

.home-page .site-header:not(.is-scrolled) .category-nav-inner a {
  color: var(--text-heading);
}

.home-page .sitemap-hero {
  min-height: clamp(620px, 72vh, 760px);
}

/* Inicio: galería puramente visual, sin capas ni contenido sobre las imágenes. */
.home-page .sitemap-hero .hero-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-page .hero-slide-content {
  max-width: 1180px;
  padding-top: var(--space-22);
}

.home-page .hero-slide-content h1,
.home-page .hero-slide-content h2 {
  max-width: 820px;
  font-size: clamp(var(--text-5xl), 5vw, var(--text-8xl));
}

.home-page .hero-controls {
  justify-content: center;
}

/* Interiores: contenido informativo centrado y overlay uniforme para contraste. */
body:not(.home-page) .page-hero.image-hero::after {
  background: rgba(var(--color-navy-900-rgb), 0.56);
}

body:not(.home-page) .page-hero.image-hero .section-hero-content {
  place-items: center;
  align-content: center;
  text-align: center;
}

body:not(.home-page) .page-hero.image-hero .section-hero-content .eyebrow,
body:not(.home-page) .page-hero.image-hero .section-hero-content h1,
body:not(.home-page) .page-hero.image-hero .section-hero-content p:not(.eyebrow) {
  margin-inline: auto;
}

body:not(.home-page) .page-hero.image-hero .section-hero-content h1,
body:not(.home-page) .page-hero.image-hero .section-hero-content p:not(.eyebrow) {
  text-shadow: 0 2px 20px rgba(var(--color-black-rgb), 0.58);
}

.home-page .commerce-benefits {
  position: relative;
  z-index: var(--z-elevated);
  width: min(calc(100% - 32px), 1180px);
  margin: calc(-1 * var(--space-14)) auto 0;
  padding: 0;
  border-radius: var(--radius-4);
  background: var(--color-white);
  box-shadow: 0 18px 45px rgba(var(--color-navy-900-rgb), 0.15);
}

.home-page .commerce-benefits-grid {
  width: 100%;
}

.home-page .commerce-benefits-grid > div {
  min-height: 150px;
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.home-page .commerce-benefits-grid .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  border: 3px solid var(--accent-alt);
  border-radius: var(--radius-round);
  color: var(--accent-alt);
  font-size: var(--text-4xl);
}

.home-page .commerce-benefits-grid strong {
  text-transform: uppercase;
}

.home-page .commerce-benefits-grid small {
  display: none;
}

.home-page .home-search-cta {
  margin: 0;
  padding: var(--space-20) 0 var(--space-15);
}

.home-page .home-search-panel {
  gap: var(--space-7);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.home-page .home-search-panel .eyebrow {
  display: none;
}

.home-page .home-search-panel h2 {
  max-width: none;
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
}

.home-page .home-search-panel h2 span,
.home-page .category-section h2 span,
.home-page .home-featured h2 span {
  color: var(--accent-alt);
}

.home-page .home-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  max-width: 1080px;
  min-height: 70px;
  margin: auto;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-4);
  background: var(--color-neutral-200);
  box-shadow: none;
}

.home-page .home-search-form input {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
}

.home-page .home-search-form button {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 76px;
  background: var(--color-bluegray-400);
}

.home-page .category-section,
.home-page .home-featured,
.home-page .useful-section,
.home-page .services-section {
  padding-block: var(--space-18);
}

.home-page .category-section .section-heading,
.home-page .home-featured .section-heading,
.home-page .useful-section .section-heading,
.home-page .services-section .section-heading {
  justify-content: center;
  margin-bottom: var(--space-9);
  text-align: center;
}

.home-page .category-section .text-link,
.home-page .home-featured .text-link {
  position: absolute;
  right: max(24px, calc((100vw - 1180px) / 2));
}

.home-page .solution-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
}

.home-page .solution-grid .map-card {
  min-height: 270px;
  padding: var(--space-4);
  border-color: rgba(var(--color-navy-900-rgb), 0.35);
  border-radius: var(--radius-4);
  box-shadow: none;
}

.home-page .solution-grid .map-card::after {
  background: linear-gradient(180deg, transparent 44%, rgba(var(--color-navy-900-rgb), 0.92));
}

.home-page .featured-map-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-7);
}

.home-page .map-product-card {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-page .map-product-card:hover {
  box-shadow: none;
}

.home-page .map-product-image {
  min-height: 300px;
}

.home-page .map-product-body {
  padding: var(--space-5) var(--space-2) var(--space-2);
}

.home-page .map-product-card > .btn {
  width: calc(100% - 12px);
  margin: var(--space-2) var(--space-2) var(--space-2);
}

.home-page .solutions-showcase {
  padding-top: var(--space-19);
}

.home-page .useful-section {
  background: var(--color-white);
}

.home-page .services-grid {
  gap: var(--space-9);
}

.home-page .service-card {
  justify-items: center;
  align-content: start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.home-page .service-card:hover {
  border: 0;
  box-shadow: none;
}

.home-page .service-card .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: var(--space-3);
  border: 4px solid var(--accent-alt);
  border-radius: var(--radius-round);
  font-size: var(--text-6xl);
}

.home-page .service-card strong {
  max-width: 220px;
  font-size: var(--text-base);
}

.home-page .service-card small {
  max-width: 30ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.home-page .quote-section {
  padding-block: var(--space-21);
  background: var(--accent-4);
}

.home-page .blog-section {
  padding-block: var(--space-20);
}

.home-page .blog-card-image {
  aspect-ratio: 3 / 4;
}

@media (max-width: 980px) {
  .home-page .solution-grid,
  .home-page .featured-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .category-section .text-link,
  .home-page .home-featured .text-link {
    position: static;
  }
}

@media (max-width: 640px) {
  .home-page .header-main {
    min-height: 68px;
  }

  .home-page .sitemap-hero {
    min-height: 610px;
  }

  .home-page .commerce-benefits {
    margin-top: calc(-1 * var(--space-9));
  }

  .home-page .commerce-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .commerce-benefits-grid > div {
    min-height: 132px;
    padding: var(--space-5) var(--space-3);
  }

  .home-page .commerce-benefits-grid .material-symbols-outlined {
    width: 52px;
    height: 52px;
  }

  .home-page .home-search-cta,
  .home-page .category-section,
  .home-page .home-featured,
  .home-page .useful-section,
  .home-page .services-section {
    padding-block: var(--space-12);
  }

  .home-page .home-search-form {
    min-height: 60px;
  }

  .home-page .home-search-form button {
    min-width: 60px;
  }

  .home-page .solution-grid,
  .home-page .featured-map-grid {
    grid-template-columns: 1fr;
  }

  .home-page .solution-grid .map-card,
  .home-page .map-product-image {
    min-height: 250px;
  }

  .home-page .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .service-card .material-symbols-outlined {
    width: 84px;
    height: 84px;
    font-size: var(--text-4xl);
  }
}

@media (min-width: 981px) {
  .home-page .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: var(--z-control);
    height: 4px;
    background: linear-gradient(90deg, var(--color-orange-500) 0%, var(--color-blue-500) 100%);
    opacity: 1;
    transition: opacity var(--duration-normal) ease;
  }

  .home-page .site-header.is-scrolled::before {
    opacity: 0;
  }

  .home-page .header-main,
  .home-page .site-header.is-scrolled .header-main {
    grid-template-columns: 150px minmax(500px, 1fr) auto;
    gap: var(--space-6);
    width: min(calc(100% - 32px), 1180px);
    min-height: 90px;
    padding: var(--space-4) 0 var(--space-3);
  }

  .home-page .brand-logo img,
  .home-page .site-header.is-scrolled .brand-logo img {
    width: 122px;
  }

  .home-page .header-main .header-nav,
  .home-page .site-header.is-scrolled .header-main .header-nav {
    width: 100%;
    justify-self: stretch;
  }

  .home-page .header-main .category-nav-inner,
  .home-page .site-header.is-scrolled .header-main .category-nav-inner {
    justify-content: space-evenly;
    gap: var(--space-7);
  }

  .home-page .category-nav-inner > a,
  .home-page .mega-menu-trigger {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
  }

  .home-page .mega-menu-trigger::after,
  .home-page .nav-with-chevron::after {
    content: "⌄";
    display: inline-block;
    margin-left: var(--space-1);
    font-size: var(--text-sm);
    line-height: var(--leading-none);
    transform: translateY(-1px);
  }

  .home-page .main-actions,
  .home-page.has-transparent-header .main-actions,
  .home-page.has-transparent-header .site-header.is-scrolled .main-actions {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-self: end;
  }

  .home-page .main-actions .icon-link,
  .home-page .corporate-link {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
    border: 2px solid currentColor;
    background: var(--color-white);
    color: var(--accent-4);
    box-shadow: none;
  }

  .home-page .main-actions .icon-link:hover,
  .home-page .corporate-link:hover {
    border-color: var(--accent-alt);
    background: var(--color-white);
    color: var(--accent-alt);
    box-shadow: none;
  }

  .home-page .site-header.is-scrolled .main-actions .icon-link,
  .home-page .site-header.is-scrolled .corporate-link {
    border-color: var(--color-white);
    background: transparent;
    color: var(--color-white);
  }

  .home-page .site-header.is-scrolled .corporate-link {
    background: var(--color-white);
  }
}

/* Beneficios como sección independiente, sin contenedor tipo card. */
.home-page .commerce-benefits {
  width: 100%;
  margin: 0;
  padding: var(--space-11) 0;
  border-radius: 0;
  background: var(--color-white);
  box-shadow: none;
}

.home-page .commerce-benefits-grid {
  width: min(calc(100% - 32px), 1180px);
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .commerce-benefits-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: var(--space-3) var(--space-5);
  border: 0;
  background: transparent;
  text-align: center;
}

.home-page .commerce-benefits-grid .material-symbols-outlined {
  margin: 0;
}

.home-page .home-search-cta {
  padding-top: var(--space-15);
}

.featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: var(--z-control);
  display: inline-flex;
  align-items: center;
  min-height: var(--badge-min-height);
  width: auto;
  padding: var(--badge-padding-block) var(--badge-padding-inline);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: .06em;
  line-height: var(--badge-line-height);
  text-transform: uppercase;
}

.home-page .map-product-card,
.shop-page .product-media {
  position: relative;
}

.home-page .featured-price {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.home-page .featured-price strong {
  color: var(--accent-alt);
  font-size: clamp(var(--text-xl), 1.5vw, var(--text-2xl));
  line-height: var(--leading-none);
  text-transform: none;
}

.home-page .map-product-image {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-neutral-100);
}

.home-page .map-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.home-page .category-section .section-heading,
.home-page .home-featured .section-heading,
.home-page .useful-section .section-heading,
.home-page .services-section .section-heading {
  justify-content: space-between;
  text-align: left;
}

.home-page .category-section .text-link,
.home-page .home-featured .text-link {
  position: static;
  margin-left: auto;
}

.home-page .solutions-showcase .section-heading {
  justify-content: flex-start;
  text-align: left;
}

.home-page .featured-map-grid .map-product-card {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-3);
  background: var(--color-white);
  box-shadow: 0 10px 26px rgba(var(--color-navy-900-rgb), 0.08);
}

.home-page .featured-map-grid .map-product-image,
.home-page .featured-map-grid .map-product-body {
  margin: 0;
}

.home-page .featured-map-grid .map-product-image {
  aspect-ratio: 3 / 2;
  min-height: 0;
  background: var(--color-white);
}

.home-page .featured-map-grid .map-product-image img {
  display: block;
  object-fit: cover;
}

.home-page .featured-map-grid .map-product-body {
  padding: var(--space-5) var(--space-5) var(--space-3);
  background: var(--color-white);
}

.home-page .featured-map-grid .map-product-card > .btn {
  width: calc(100% - 36px);
  margin: 0 var(--space-5) var(--space-5);
  border-color: var(--accent-alt);
  background: var(--color-white);
  color: var(--accent-alt);
}

.home-page .featured-map-grid .map-product-card > .btn:hover,
.home-page .featured-map-grid .map-product-card > .btn:focus-visible {
  border-color: var(--accent-alt);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
}

.home-page .featured-map-grid .map-product-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-3);
  box-shadow: 0 16px 34px rgba(var(--color-navy-900-rgb), 0.14);
}

.home-page .featured-map-grid .featured-badge {
  top: 12px;
  left: 12px;
}

.home-page .useful-section h2 span {
  color: var(--accent-alt);
}

.home-page .useful-documents-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7);
}

.home-page .useful-document-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: var(--space-7) var(--space-6);
  background: linear-gradient(145deg, rgba(var(--color-navy-900-rgb), 0.18), rgba(var(--color-navy-900-rgb), 0.04)),
    var(--color-neutral-400);
  color: var(--color-white);
  box-shadow: 0 10px 24px rgba(var(--color-navy-900-rgb), 0.08);
  transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.home-page .useful-document-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: var(--z-underlay);
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(var(--color-navy-900-rgb), 0.18));
}

.home-page .useful-document-card:hover {
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(var(--color-navy-900-rgb), 0.14);
}

.home-page .useful-document-card img {
  width: 84px;
  height: auto;
}

.home-page .useful-document-card strong {
  max-width: 240px;
  color: var(--color-white);
  font-size: clamp(var(--text-lg), 1.8vw, var(--text-2xl));
  line-height: var(--leading-display);
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .home-page .useful-documents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .home-page .useful-document-card {
    padding: var(--space-5) var(--space-4);
  }

  .home-page .useful-document-card strong {
    font-size: var(--text-base);
  }
}

.home-page .useful-document-card {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: var(--space-5);
  border: 0;
  border-radius: 0;
  background: var(--color-neutral-400);
  box-shadow: none;
  text-align: center;
}

.home-page .useful-document-card::after {
  content: none;
}

.home-page article.useful-document-card:hover {
  transform: none;
  box-shadow: none;
}

.home-page .useful-document-card img {
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) ease;
}

.home-page .useful-document-card:hover img {
  transform: scale(1.035);
}

.home-page .useful-document-card strong,
.home-page .useful-document-card span {
  position: relative;
  z-index: var(--z-content);
  max-width: none;
  color: var(--color-white);
}

.home-page .useful-document-card strong {
  font-size: var(--text-base);
  line-height: var(--leading-title);
}

.home-page .useful-document-card span {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

/* Flujo del cotizador: conectores en los espacios, sin cruzar las tarjetas. */
.home-page .home-quote-timeline {
  gap: var(--space-8);
}

.home-page .home-quote-timeline::before,
.home-page .home-quote-timeline::after {
  display: none;
}

.home-page .home-quote-timeline .quote-timeline-step {
  position: relative;
  animation: quoteStepNatural 6s ease-in-out infinite;
}

.home-page .home-quote-timeline .quote-timeline-step:nth-child(2) {
  animation-delay: 2s;
}

.home-page .home-quote-timeline .quote-timeline-step:nth-child(3) {
  animation-delay: 4s;
}

.home-page .home-quote-timeline .quote-timeline-step:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  left: calc(100% + 7px);
  width: 16px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(var(--color-orange-500-rgb), 0.9);
  font-size: var(--text-3xl);
  font-weight: var(--font-regular);
  line-height: var(--leading-none);
  box-shadow: none;
  transform: translateY(-50%);
  animation: quoteConnectorPulse 2s ease-in-out infinite;
}

.home-page .home-quote-timeline .quote-step-number {
  animation: quoteDotNatural 6s ease-in-out infinite;
}

.home-page .home-quote-timeline .quote-timeline-step:nth-child(2) .quote-step-number {
  animation-delay: 2s;
}

.home-page .home-quote-timeline .quote-timeline-step:nth-child(3) .quote-step-number {
  animation-delay: 4s;
}

@keyframes quoteStepNatural {
  0%, 24%, 100% {
    border-color: rgba(var(--color-white-rgb), 0.46);
    background: rgba(var(--color-white-rgb), 0.12);
    transform: translateY(0);
  }
  8%, 16% {
    border-color: rgba(var(--color-orange-500-rgb), 0.9);
    background: rgba(var(--color-white-rgb), 0.18);
    transform: translateY(-3px);
  }
}

@keyframes quoteDotNatural {
  0%, 24%, 100% {
    background: var(--color-white);
    color: var(--accent-4);
    transform: scale(1);
  }
  8%, 16% {
    background: var(--accent-alt);
    color: var(--text-on-accent-alt);
    transform: scale(1.08);
  }
}

@keyframes quoteConnectorPulse {
  0%, 100% {
    opacity: 0.45;
    transform: translate(-2px, -50%);
  }
  50% {
    opacity: 1;
    transform: translate(2px, -50%);
  }
}

@media (max-width: 980px) {
  .home-page .home-quote-timeline {
    gap: var(--space-5);
  }

  .home-page .home-quote-timeline .quote-timeline-step:not(:last-child)::after {
    content: "↓";
    top: calc(100% + 7px);
    left: 34px;
    width: 16px;
    height: 12px;
    font-size: var(--text-lg);
    box-shadow: none;
    animation-name: quoteConnectorPulseMobile;
  }
}

@keyframes quoteConnectorPulseMobile {
  0%, 100% { opacity: 0.45; transform: translateY(-2px); }
  50% { opacity: 1; transform: translateY(2px); }
}

.home-page .featured-price small {
  color: var(--text-heading);
  font-size: var(--text-sm);
}

.home-page .featured-price s {
  color: var(--text-secondary);
}

/* Escala tipográfica semántica de la Home: h1-h4, p y small. */
.home-page :where(.commerce-benefits-grid, .map-card, .map-product-body, .service-card, .useful-document-card, .quote-visual-card, .quote-timeline-step) h3,
.home-page :where(.commerce-benefits-grid, .map-card, .map-product-body, .service-card, .useful-document-card, .quote-visual-card, .quote-timeline-step) p {
  margin: 0;
}

.home-page .commerce-benefits-grid h3 {
  color: var(--text-heading);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.home-page .map-card h3,
.home-page .map-card small {
  position: relative;
  z-index: var(--z-content);
  color: var(--color-white);
}

.home-page .map-card h3,
.home-page .map-product-body h3,
.home-page .service-card h3,
.home-page .useful-document-card h3,
.home-page .quote-visual-card h3,
.home-page .quote-timeline-step h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.home-page .map-card small {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.home-page .map-product-body h3,
.home-page .service-card h3 {
  color: var(--text-heading);
}

.home-page .featured-price .current-price {
  color: var(--accent-alt);
  font-family: var(--font-body);
  font-size: clamp(var(--text-xl), 1.5vw, var(--text-2xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-none);
}

.home-page .useful-document-card h3,
.home-page .useful-document-card small {
  position: relative;
  z-index: var(--z-content);
  max-width: none;
  color: var(--color-white);
}

.home-page .useful-document-card h3 {
  width: 100%;
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(var(--text-lg), 1.35vw, var(--text-2xl));
  line-height: var(--leading-title);
  text-align: center;
  text-wrap: balance;
  text-shadow: var(--hero-text-shadow);
}

.home-page .useful-document-card small {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.home-page .quote-visual-card h3,
.home-page .quote-timeline-step h3,
.home-page .quote-total p {
  color: inherit;
}

.home-page .quote-total p {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.home-page .quote-timeline-step h3 {
  align-self: end;
}

.home-page .quote-copy h2 {
  font-size: clamp(var(--text-4xl), 3vw, var(--text-5xl));
  line-height: var(--leading-display);
}

/* Navegación coherente: dropdowns compactos y responsive. */
.home-page .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-control);
  height: 4px;
  background: linear-gradient(90deg, var(--accent-alt) 0%, var(--accent-4) 100%);
  opacity: 1;
  transition: opacity var(--duration-normal) ease;
}

.home-page .site-header.is-scrolled::before {
  opacity: 0;
}

.home-page .nav-dropdown {
  position: relative;
  color: inherit;
}

.home-page .nav-dropdown summary {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 42px;
  color: inherit;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  list-style: none;
  text-transform: uppercase;
}

.home-page .nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.home-page .nav-dropdown summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: calc(-1 * var(--space-1));
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-normal) ease, margin var(--duration-normal) ease;
}

.home-page .nav-dropdown[open] summary {
  color: var(--accent-alt);
}

.home-page .nav-dropdown[open] summary::after {
  margin-top: var(--space-1);
  transform: rotate(225deg);
}

.home-page .nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  z-index: var(--z-overlay-raised);
  display: grid;
  width: 250px;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgba(var(--color-navy-900-rgb), 0.12);
  border-top: 3px solid var(--accent-alt);
  border-radius: 0 0 var(--radius-3) var(--radius-3);
  background: var(--color-white);
  box-shadow: 0 18px 42px rgba(var(--color-navy-900-rgb), 0.18);
  transform: translateX(-50%);
}

.home-page .nav-dropdown-wide .nav-dropdown-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 390px;
}

.home-page .nav-dropdown-panel a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  text-transform: none;
}

.home-page .nav-dropdown-panel a:hover,
.home-page .nav-dropdown-panel a:focus-visible {
  background: rgba(var(--color-orange-500-rgb), 0.1);
  color: var(--accent-alt);
}

@media (max-width: 980px) {
  .home-page .site-header .header-main,
  .home-page.has-transparent-header .site-header.is-scrolled .header-main {
    grid-template-columns: minmax(120px, 1fr) auto auto;
    width: min(calc(100% - 24px), 100%);
  }

  .home-page .site-header .header-main .header-nav {
    inset: 72px 0 0 0;
    width: 100vw;
    max-width: none;
    margin: 0;
    height: calc(100dvh - 72px);
    max-height: none;
    padding: var(--space-3) var(--space-4) var(--space-6);
    background: var(--accent-4);
  }

  .home-page .site-header .header-main .category-nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    gap: var(--space-1);
  }

  .home-page .nav-dropdown {
    width: 100%;
  }

  .home-page .site-header .header-main .category-nav-inner > a,
  .home-page .nav-dropdown summary {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid rgba(var(--color-white-rgb), 0.12);
    color: var(--color-white);
    font-size: var(--text-sm);
  }

  .home-page .nav-dropdown-panel,
  .home-page .nav-dropdown-wide .nav-dropdown-panel {
    position: static;
    grid-template-columns: 1fr;
    width: 100%;
    gap: var(--space-1);
    margin: var(--space-1) 0 var(--space-3);
    padding: var(--space-1) 0 var(--space-2) var(--space-4);
    border: 0;
    border-left: 2px solid var(--accent-alt);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .home-page.has-transparent-header .site-header .header-main .nav-dropdown-panel a,
  .home-page.has-transparent-header .site-header:not(.is-scrolled) .header-main .nav-dropdown-panel a,
  .home-page.has-transparent-header .site-header.is-scrolled .header-main .nav-dropdown-panel a {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid rgba(var(--color-white-rgb), 0.08);
    border-radius: 0;
    color: rgba(var(--color-white-rgb), 0.92);
    font-size: var(--text-sm);
    opacity: 1;
  }

  .home-page.has-transparent-header .site-header .header-main .nav-dropdown-panel a:hover,
  .home-page.has-transparent-header .site-header .header-main .nav-dropdown-panel a:focus-visible {
    background: rgba(var(--color-white-rgb), 0.1);
    color: var(--color-white);
  }

  .home-page .mobile-menu-toggle {
    border-color: rgba(var(--color-navy-900-rgb), 0.18);
    background: var(--color-white);
    color: var(--accent-4);
  }
}

@media (max-width: 980px) {
  .home-page .site-header .header-main,
  .home-page.has-transparent-header .site-header.is-scrolled .header-main {
    grid-template-columns: minmax(108px, 1fr) 44px auto;
    gap: var(--space-2);
  }

  .home-page .site-header .brand-logo {
    width: min(160px, 100%);
  }

  .home-page .site-header .brand-logo img {
    width: 100%;
    max-height: 34px;
  }

  .home-page .mobile-menu-toggle,
  .home-page.has-transparent-header .site-header.is-scrolled .mobile-menu-toggle {
    display: inline-grid;
    grid-column: 2;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(var(--color-white-rgb), 0.58);
    border-radius: var(--radius-round);
    background: transparent;
    color: var(--color-white);
    position: relative;
    z-index: var(--z-overlay-raised);
  }

  .home-page.has-transparent-header .site-header:not(.is-scrolled) .mobile-menu-toggle {
    border-color: rgba(var(--color-navy-900-rgb), 0.28);
    background: transparent;
    color: var(--accent-4);
  }

  .home-page .mobile-menu-toggle .mobile-menu-label {
    display: none;
  }

  .home-page .mobile-menu-toggle .material-symbols-outlined {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 980px) {
  .home-page .home-quote-timeline .quote-timeline-step h3,
  .home-page .home-quote-timeline .quote-timeline-step small {
    grid-column: 2;
  }
}

/* Fuente de verdad del header: franja blanca en flujo, antes del hero. */
.has-transparent-header .site-header,
.has-transparent-header .site-header.is-scrolled {
  position: sticky;
  left: auto;
  right: auto;
  background: rgba(var(--color-white-rgb), 0.98);
  border-bottom: 1px solid rgba(var(--color-navy-900-rgb), 0.1);
  box-shadow: var(--elevation-subtle);
  color: var(--text-heading);
}

.site-header .top-strip { display: none; }

.has-transparent-header .header-main,
.has-transparent-header .site-header.is-scrolled .header-main {
  min-height: 76px;
  padding-block: var(--space-3);
}

.has-transparent-header .brand-logo-white,
.has-transparent-header .site-header.is-scrolled .brand-logo-white { opacity: 0; }

.has-transparent-header .brand-logo-blue,
.has-transparent-header .site-header.is-scrolled .brand-logo-blue { opacity: 1; }

.has-transparent-header .brand-logo img,
.has-transparent-header .site-header.is-scrolled .brand-logo img { filter: none; }

.has-transparent-header .category-nav-inner a,
.has-transparent-header .site-header.is-scrolled .category-nav-inner a { color: var(--text-heading); }

.has-transparent-header .main-actions,
.has-transparent-header .site-header.is-scrolled .main-actions { display: flex; }

.has-transparent-header .main-actions .icon-link,
.has-transparent-header .site-header.is-scrolled .main-actions .icon-link {
  border-color: var(--accent-4);
  background: var(--color-white);
  color: var(--accent-4);
  box-shadow: none;
}

.has-transparent-header .main-actions .icon-link:hover,
.has-transparent-header .site-header.is-scrolled .main-actions .icon-link:hover {
  border-color: var(--accent-alt);
  background: rgba(var(--color-orange-500-rgb), 0.08);
}

body:not(.home-page) .page-hero.image-hero { padding-top: var(--space-12); }

@media (max-width: 980px) {
  .has-transparent-header .mobile-menu-toggle,
  .has-transparent-header .site-header.is-scrolled .mobile-menu-toggle {
    border-color: rgba(var(--color-navy-900-rgb), 0.16);
    background: var(--color-white);
    color: var(--accent-4);
  }
}

@media (max-width: 640px) {
  body:not(.home-page) .page-hero.image-hero { padding-top: var(--space-8); }
}

/* La apariencia definida en Home se aplica al componente en cualquier ruta. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-control);
  height: 4px;
  background: linear-gradient(90deg, var(--accent-alt) 0%, var(--accent-4) 100%);
}

.nav-dropdown { position: relative; color: inherit; }

.nav-dropdown summary {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 42px;
  color: inherit;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  list-style: none;
  text-transform: uppercase;
}

.nav-dropdown summary::-webkit-details-marker { display: none; }

.nav-dropdown summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: calc(-1 * var(--space-1));
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-normal) ease, margin var(--duration-normal) ease;
}

.nav-dropdown[open] summary { color: var(--accent-alt); }
.nav-dropdown[open] summary::after { margin-top: var(--space-1); transform: rotate(225deg); }

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  z-index: var(--z-overlay-raised);
  display: grid;
  width: 250px;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgba(var(--color-navy-900-rgb), 0.12);
  border-top: 3px solid var(--accent-alt);
  border-radius: 0 0 var(--radius-3) var(--radius-3);
  background: var(--color-white);
  box-shadow: 0 18px 42px rgba(var(--color-navy-900-rgb), 0.18);
  transform: translateX(-50%);
}

.nav-dropdown-wide .nav-dropdown-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 390px; }

.nav-dropdown-panel a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-2);
  color: var(--text-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  text-transform: none;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible { background: rgba(var(--color-orange-500-rgb), 0.1); color: var(--accent-alt); }

@media (min-width: 981px) {
  .has-transparent-header .header-main,
  .has-transparent-header .site-header.is-scrolled .header-main {
    grid-template-columns: 150px minmax(500px, 1fr) auto;
    gap: var(--space-6);
    width: min(calc(100% - 32px), 1180px);
    min-height: 90px;
    padding: var(--space-4) 0 var(--space-3);
  }

  .brand-logo img,
  .has-transparent-header .site-header.is-scrolled .brand-logo img { width: 122px; }

  .header-main .header-nav,
  .has-transparent-header .site-header.is-scrolled .header-main .header-nav { width: 100%; justify-self: stretch; }

  .header-main .category-nav-inner,
  .has-transparent-header .site-header.is-scrolled .header-main .category-nav-inner {
    justify-content: space-evenly;
    gap: var(--space-7);
  }

  .category-nav-inner > a {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: uppercase;
  }

  .main-actions,
  .has-transparent-header .main-actions,
  .has-transparent-header .site-header.is-scrolled .main-actions {
    gap: var(--space-6);
    align-items: center;
    justify-self: end;
  }

  .main-actions .icon-link,
  .corporate-link,
  .has-transparent-header .site-header.is-scrolled .main-actions .icon-link {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
    border: 2px solid var(--accent-4);
    background: var(--color-white);
    color: var(--accent-4);
  }
}

@media (max-width: 980px) {
  .site-header .header-main,
  .has-transparent-header .site-header.is-scrolled .header-main {
    grid-template-columns: minmax(108px, 1fr) 44px auto;
    width: min(calc(100% - 24px), 100%);
    gap: var(--space-2);
  }

  .site-header .brand-logo { width: min(160px, 100%); }
  .site-header .brand-logo img { width: 100%; max-height: 34px; }

  .site-header .header-main .header-nav {
    inset: 72px 0 0;
    width: 100vw;
    max-width: none;
    height: calc(100dvh - 72px);
    max-height: none;
  }

  .site-header .header-main .category-nav-inner { display: grid; grid-template-columns: 1fr; width: 100%; gap: var(--space-1); }
  .nav-dropdown { width: 100%; }

  .site-header .header-main .category-nav-inner > a,
  .nav-dropdown summary {
    width: 100%;
    min-height: 50px;
    justify-content: space-between;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid rgba(var(--color-white-rgb), 0.12);
    color: var(--color-white);
    font-size: var(--text-sm);
  }

  .nav-dropdown-panel,
  .nav-dropdown-wide .nav-dropdown-panel {
    position: static;
    grid-template-columns: 1fr;
    width: 100%;
    margin: var(--space-1) 0 var(--space-3);
    padding: var(--space-1) 0 var(--space-2) var(--space-4);
    border: 0;
    border-left: 2px solid var(--accent-alt);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
}

/* Estado activo final del componente compartido. */
.site-header .header-main .category-nav-inner > a.is-active,
.site-header .header-main .nav-dropdown.is-active > summary,
.site-header .header-main .nav-dropdown > summary.is-active {
  position: relative;
  color: var(--accent-alt);
  font-weight: var(--font-bold);
}

.site-header .header-main .category-nav-inner > a.is-active::before,
.site-header .header-main .nav-dropdown.is-active > summary::before,
.site-header .header-main .nav-dropdown > summary.is-active::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 3px;
  border-radius: var(--radius-1);
  background: var(--accent-alt);
}

@media (max-width: 980px) {
  .site-header .header-main .category-nav-inner > a.is-active::before,
  .site-header .header-main .nav-dropdown.is-active > summary::before,
  .site-header .header-main .nav-dropdown > summary.is-active::before {
    top: 10px;
    right: auto;
    bottom: 10px;
    left: -8px;
    width: 3px;
    height: auto;
  }
}

/* El estado activo se comunica solo mediante color. */
.site-header .header-main .category-nav-inner > a.is-active,
.site-header .header-main .nav-dropdown.is-active > summary,
.site-header .header-main .nav-dropdown > summary.is-active {
  color: var(--accent-alt);
  font-weight: var(--font-medium);
}

.site-header .header-main .category-nav-inner > a.is-active::before,
.site-header .header-main .nav-dropdown.is-active > summary::before,
.site-header .header-main .nav-dropdown > summary.is-active::before {
  content: none;
}

/* Tienda replica los bloques de beneficios y búsqueda definidos en Home. */
.shop-page .shop-benefits {
  position: relative;
  z-index: var(--z-elevated);
  width: 100%;
  margin: 0;
  padding: var(--space-11) 0;
  border-radius: 0;
  background: var(--color-white);
  box-shadow: none;
}

.shop-page .shop-benefits .commerce-benefits-grid {
  width: min(calc(100% - 32px), 1180px);
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shop-page .shop-benefits .commerce-benefits-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: var(--space-3) var(--space-5);
  border: 0;
  background: transparent;
  text-align: center;
}

.shop-page .shop-benefits .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-1);
  border: 3px solid var(--accent-alt);
  border-radius: var(--radius-round);
  color: var(--accent-alt);
  font-size: var(--text-4xl);
}

.shop-page .shop-benefits strong { color: var(--text-heading); text-transform: uppercase; }
.shop-page .shop-benefits small { display: none; }

.shop-page .shop-benefits + .home-search-cta {
  margin: 0;
  padding: var(--space-15) 0 var(--space-15);
  background: var(--color-white);
}

.shop-page .home-search-panel {
  gap: var(--space-7);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.shop-page .home-search-panel .eyebrow { display: none; }

.shop-page .home-search-panel h2 {
  max-width: none;
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
}

.shop-page .home-search-panel h2 span { color: var(--accent-alt); }

.shop-page .home-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  max-width: 1080px;
  min-height: 70px;
  margin: auto;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-4);
  background: var(--color-neutral-200);
  box-shadow: none;
}

.shop-page .home-search-form input {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  background: transparent;
}

.shop-page .home-search-form button {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 76px;
  background: var(--color-bluegray-400);
}

.shop-campaign-hero {
  position: relative;
  min-height: clamp(440px, 56vw, 640px);
  overflow: hidden;
  color: var(--color-white);
}

.shop-campaign-hero > img,
.shop-campaign-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shop-campaign-hero > img { object-fit: cover; object-position: center; }
.shop-campaign-overlay { background: linear-gradient(90deg, rgba(var(--color-navy-900-rgb), 0.82), rgba(var(--color-navy-900-rgb), 0.2)); }

.shop-campaign-content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  min-height: inherit;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: var(--space-18) var(--space-23);
}

.shop-campaign-content h1 { max-width: 820px; margin: var(--space-2) 0 var(--space-4); font-size: clamp(var(--text-5xl), 5vw, var(--text-8xl)); line-height: var(--leading-display); }
.shop-campaign-content > p:not(.eyebrow) { max-width: 650px; margin: 0 0 var(--space-7); font-size: var(--text-lg); }

.shop-campaign-dots {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-control);
  display: flex;
  min-height: 48px;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  background: var(--color-white);
}

.shop-campaign-dots span { width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--color-bluegray-400); }
.shop-campaign-dots .is-active { background: var(--accent-alt); }

.shop-catalog-heading {
  padding: var(--space-9) 0 var(--space-2);
  background: var(--background-alt);
}
.shop-catalog-heading h2 { margin: var(--space-2) 0 var(--space-1); font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl)); }
.shop-catalog-heading p { margin: 0; color: var(--text-secondary); }

.shop-page .filters-panel { border: 0; box-shadow: none; }
.shop-page .filters-panel .panel-header { border-bottom: 2px solid rgba(var(--color-orange-500-rgb), 0.55); }
.shop-page .shop-filter-group { border-bottom-color: rgba(var(--color-orange-500-rgb), 0.45); }

.shop-page .shop-layout {
  grid-template-columns: var(--shop-filter-sidebar-width) minmax(0, 1fr);
  gap: var(--space-7);
}

.shop-page .filters-panel {
  padding: 0;
  background: transparent;
}

.shop-page .filters-panel .panel-header {
  min-height: 48px;
  align-items: center;
  padding: 0 var(--space-1);
  border-bottom: 1px solid var(--color-corporate-orange);
}

.shop-page .filters-panel .panel-header h2 {
  margin: 0;
  font-size: var(--text-xl);
  text-transform: uppercase;
}

.shop-page .shop-filter-group {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--color-corporate-orange);
  border-radius: 0;
  background: transparent;
}

.shop-page .shop-filter-group summary {
  min-height: 48px;
  padding: var(--space-3) var(--space-8) var(--space-3) var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-transform: uppercase;
}

.shop-page .shop-filter-group summary::after {
  content: "+";
  top: 50%;
  right: 12px;
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--accent-4);
  color: var(--text-on-dark);
  font-size: var(--text-2xs);
  line-height: var(--leading-none);
  transform: translateY(-50%);
}

.shop-page .shop-filter-group[open] summary::after {
  content: "−";
  transform: translateY(-50%);
}

.shop-page .shop-filter-group[open] summary {
  border-bottom: 1px solid rgba(var(--color-corporate-orange-rgb), .4);
  background: transparent;
}

.shop-page .shop-filter-group .filter-options {
  padding: var(--space-2) var(--space-1) var(--space-3);
  background: transparent;
}

.shop-page .outlet-filter summary span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--accent-alt);
  font-weight: var(--font-bold);
}

.shop-page .outlet-filter summary span::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: var(--radius-round);
  background: var(--accent-alt);
  content: "";
}

@media (max-width: 980px) {
  .shop-page .shop-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .shop-page .filters-panel { background: var(--color-white); }
}

.shop-services { padding: var(--space-21) 0; text-align: center; }
.shop-services h2,
.shop-faq .faq-heading h2 { margin: 0 0 var(--space-11); font-size: clamp(var(--text-5xl), 4vw, var(--text-6xl)); }
.shop-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-9); }
.shop-services-grid a { display: grid; gap: var(--space-5); justify-items: center; color: var(--text-heading); }
.shop-services-grid .material-symbols-outlined { display: grid; place-items: center; width: 116px; height: 116px; border: 6px solid rgba(var(--color-orange-500-rgb), 0.78); border-radius: var(--radius-round); color: var(--accent-alt); font-size: var(--text-6xl); }
.shop-services-grid strong { max-width: 190px; font-size: var(--text-lg); text-transform: uppercase; }

.shop-faq { padding: var(--space-18) 0 var(--space-22); background: var(--background-alt); }
.shop-faq .faq-heading { text-align: center; }

.shop-solutions { padding-top: var(--space-21); }
.shop-solutions .section-heading { justify-content: center; text-align: center; }

@media (max-width: 980px) {
  .shop-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .shop-page .shop-benefits { padding-block: var(--space-7); }
  .shop-page .shop-benefits .commerce-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-page .shop-benefits .commerce-benefits-grid > div { min-height: 132px; padding: var(--space-5) var(--space-3); }
  .shop-page .shop-benefits .material-symbols-outlined { width: 52px; height: 52px; font-size: var(--text-3xl); }
  .shop-page .shop-benefits + .home-search-cta { padding-block: var(--space-11); }
  .shop-page .home-search-form { min-height: 60px; }
  .shop-page .home-search-form button { min-width: 60px; }
  .shop-campaign-hero { min-height: 520px; }
  .shop-campaign-content { padding-block: var(--space-14) var(--space-22); }
  .shop-campaign-content h1 { font-size: clamp(var(--text-4xl), 11vw, var(--text-6xl)); }
  .shop-services-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-3); }
  .shop-services-grid .material-symbols-outlined { width: 82px; height: 82px; border-width: 4px; font-size: var(--text-4xl); }
  .shop-services-grid strong { font-size: var(--text-sm); }
}

/* Estado sticky al hacer scroll: navegación azul en todas las pantallas. */
.has-transparent-header .site-header.is-scrolled {
  background: rgba(var(--color-navy-900-rgb), 0.98);
  border-bottom-color: rgba(var(--color-white-rgb), 0.16);
  box-shadow: 0 8px 24px rgba(var(--color-navy-900-rgb), 0.2);
  color: var(--color-white);
}

.has-transparent-header .site-header.is-scrolled::before { opacity: 0; }

.has-transparent-header .site-header.is-scrolled .brand-logo-blue { opacity: 0; }
.has-transparent-header .site-header.is-scrolled .brand-logo-white { opacity: 1; }

.has-transparent-header .site-header.is-scrolled .category-nav-inner > a,
.has-transparent-header .site-header.is-scrolled .nav-dropdown > summary {
  color: var(--color-white);
}

.has-transparent-header .site-header.is-scrolled .category-nav-inner > a.is-active,
.has-transparent-header .site-header.is-scrolled .nav-dropdown.is-active > summary,
.has-transparent-header .site-header.is-scrolled .nav-dropdown > summary.is-active {
  color: var(--accent-alt);
}

.has-transparent-header .site-header.is-scrolled .main-actions .icon-link {
  border-color: var(--color-white);
  background: transparent;
  color: var(--color-white);
}

.has-transparent-header .site-header.is-scrolled .corporate-link {
  border-color: var(--color-white);
  background: var(--color-white);
}

/* Barra promocional fina y acciones compactas del header. */
.top-strip,
.home-page .top-strip,
.has-transparent-header .top-strip {
  display: block;
  padding: 0;
  border-top: 6px solid var(--color-black);
  border-bottom: 2px solid var(--color-corporate-orange);
  background: var(--color-corporate-blue);
  color: var(--text-on-corporate);
}

.top-strip .top-strip-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  min-height: 38px;
  padding-block: var(--space-1);
  overflow: hidden;
  font-size: var(--header-promo-size);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wider);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.top-strip .top-strip-inner strong { color: var(--text-on-corporate); font-weight: var(--font-bold); }
.top-strip .top-strip-inner strong span { font-weight: var(--font-regular); }

.top-strip .top-strip-inner a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--text-on-corporate);
  border-radius: var(--radius-3);
  color: var(--text-on-corporate);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-none);
}

.top-strip .top-strip-inner a:hover { background: var(--color-white); color: var(--color-corporate-blue-dark); }

@media (min-width: 981px) {
  .main-actions .icon-link,
  .corporate-link,
  .has-transparent-header .site-header.is-scrolled .main-actions .icon-link {
    width: 38px;
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
    border-width: 1px;
  }

  .main-actions .icon-link .material-symbols-outlined { font-size: var(--text-xl); }
  .corporate-link img { width: 24px; height: 24px; }

  .main-actions,
  .has-transparent-header .main-actions,
  .has-transparent-header .site-header.is-scrolled .main-actions { gap: var(--space-4); }
}

@media (max-width: 980px) {
  .top-strip .top-strip-inner { flex-direction: row; justify-content: flex-start; gap: var(--space-2); min-height: 34px; padding-inline: var(--space-2); overflow-x: auto; font-size: var(--text-2xs); letter-spacing: var(--tracking-label); scrollbar-width: none; }
  .top-strip .top-strip-inner strong,
  .top-strip .top-strip-inner a { flex: 0 0 auto; }
  .top-strip .top-strip-inner::-webkit-scrollbar { display: none; }
  .top-strip .top-strip-inner a { min-height: 20px; padding-inline: var(--space-2); font-size: var(--text-2xs); }
}

@media (max-width: 480px) {
  .top-strip .top-strip-inner strong span { display: none; }
}

/* El top header naranja reemplaza la antigua línea decorativa degradada. */
.site-header::before,
.home-page .site-header::before {
  content: none;
}

/* Acceso flotante global de WhatsApp: círculo de marca sin texto visible. */
.whatsapp-float,
.checkout-page .whatsapp-float {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-whatsapp);
  box-shadow: 0 10px 26px rgba(var(--color-whatsapp-dark-rgb), 0.36);
}

.whatsapp-float::before {
  content: "";
  width: 32px;
  height: 32px;
  background: url("../images/brand/whatsapp.svg") center / contain no-repeat;
}

.whatsapp-float > span { display: none; }

.whatsapp-float:hover {
  background: var(--color-whatsapp-hover);
  box-shadow: 0 14px 30px rgba(var(--color-whatsapp-dark-rgb), 0.44);
}

@media (max-width: 640px) {
  .whatsapp-float,
  .checkout-page .whatsapp-float {
    width: 52px;
    height: 52px;
  }

  .whatsapp-float::before { width: 29px; height: 29px; }
}

/* Escala medida en glasstech.cl el 2026-09-08; contenido propio del ecommerce. */
.site-footer-reference {
  --footer-font-size: var(--text-sm);
  --footer-line-height: var(--leading-body);
  --footer-link-gap: var(--space-4);
  padding: 0;
  border-top: 0;
  background: var(--color-white);
  color: var(--accent-4);
  font-family: var(--font-body);
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
  letter-spacing: var(--tracking-wide);
}

.site-footer-reference::before { content: none; }

.footer-reference-grid {
  display: grid;
  width: calc(100% - 96px);
  max-width: none;
  grid-template-columns: 23.3% 15% 12.75% 13.1% 12%;
  justify-content: space-between;
  padding-block: var(--space-28) var(--space-24);
}

.footer-reference-aside {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
}

.footer-reference-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.footer-reference-social a {
  display: grid;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  place-items: center;
  color: var(--color-corporate-orange);
}

.footer-reference-social svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.footer-reference-social svg rect,
.footer-reference-social svg circle:not(.fill-dot) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.footer-archdaily {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: var(--leading-compressed);
  letter-spacing: var(--tracking-normal);
}

.footer-reference-contact {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-10);
  color: var(--accent);
  font-size: var(--footer-font-size);
}

.footer-reference-contact strong { font-weight: var(--font-semibold); }

.footer-reference-contact a {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--accent);
}

.footer-reference-contact .material-symbols-outlined { font-size: var(--text-xl); }

.footer-reference-corporate {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
  color: var(--accent-4);
  font-size: var(--footer-font-size);
  font-weight: var(--font-semibold);
  line-height: var(--footer-line-height);
}

.footer-reference-corporate img { width: 54px; height: 54px; object-fit: contain; }
.footer-reference-corporate strong { color: var(--accent); }

.footer-reference-column {
  display: grid;
  gap: var(--footer-link-gap);
  align-content: start;
}

.footer-reference-column h2 {
  margin: 0;
  color: var(--accent-4);
  font-family: var(--font-body);
  font-size: var(--footer-font-size);
  font-weight: var(--font-semibold);
  line-height: var(--footer-line-height);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
}

.footer-reference-column a {
  color: var(--accent-4);
  font-size: var(--footer-font-size);
  line-height: var(--footer-line-height);
}

.footer-reference-column a:hover { color: var(--accent); transform: none; }
.footer-reference-column .footer-accent-link { color: var(--color-corporate-orange); }

.footer-reference-bottom {
  display: flex;
  justify-content: center;
  width: calc(100% - 96px);
  max-width: none;
  min-height: 28px;
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid rgba(var(--color-corporate-orange-rgb), .48);
}

.footer-reference-bottom p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--footer-line-height);
  letter-spacing: var(--tracking-wide);
  text-align: center;
}

@media (max-width: 1100px) {
  .footer-reference-grid { grid-template-columns: 1.2fr repeat(2, 1fr); gap: var(--space-12); }
  .footer-reference-aside { grid-row: span 2; }
}

@media (max-width: 700px) {
  .footer-reference-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-6); padding-block: var(--space-20) var(--space-16); }
  .footer-reference-aside { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}

@media (max-width: 430px) {
  .footer-reference-grid { grid-template-columns: 1fr; }
  .footer-reference-aside { grid-column: auto; }
}

/* El flujo del cotizador queda resumido en tres pasos. */
.quote-timeline {
  --timeline-duration: 6s;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-timeline::before,
.quote-timeline::after {
  left: calc(16.667% + 22px);
  right: calc(16.667% + 22px);
}

.login-page .account-card {
  padding: var(--space-7);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-1);
}

.login-page .account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.auth-intro { margin-bottom: var(--space-6); }
.auth-intro h2 { margin: 0 0 var(--space-2); }
.auth-intro p { max-width: 760px; margin: 0; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.auth-card { display: grid; gap: var(--space-5); padding: var(--space-7); }
.auth-card-heading { display: flex; gap: var(--space-4); align-items: flex-start; }
.auth-card-heading > .material-symbols-outlined { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: var(--radius-round); background: var(--background-alt); color: var(--accent-alt); }
.auth-card-heading h2 { margin: 0 0 var(--space-1); }
.auth-card-heading p { margin: 0; }
.auth-card form { display: grid; gap: var(--space-4); }
.auth-card form > label { display: grid; gap: var(--space-2); font-weight: var(--font-semibold); }
.auth-card form > label.checkbox-card,
.auth-options label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  margin: 0;
  line-height: var(--leading-snug);
}
.auth-card input:not([type="checkbox"]),
.auth-card select,
.account-edit-form .password-field input {
  min-height: 44px;
  border: 1px solid var(--accent-3);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font: inherit;
}
.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: var(--space-13); }
.password-field button { position: absolute; top: 50%; right: 4px; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 0; background: transparent; color: var(--text-secondary); transform: translateY(-50%); cursor: pointer; }
.auth-options { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.auth-options label { font-weight: var(--font-medium); }
.auth-feedback { min-height: 20px; margin: 0; color: var(--accent-4); font-size: var(--text-sm); font-weight: var(--font-semibold); }
@media (max-width: 760px) { .auth-grid { grid-template-columns: 1fr; } .auth-card { padding: var(--space-6); } .auth-options { align-items: flex-start; flex-direction: column; } }

.account-orders-table:has(.account-empty-orders) {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-orders-table > .account-empty-orders,
.account-empty-orders {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--background-alt);
}

.account-empty-orders .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-orange-500-rgb), 0.12);
  color: var(--accent-alt);
  font-size: var(--text-3xl);
}

.account-empty-orders-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.account-empty-orders-copy strong {
  color: var(--text-heading);
  font-size: var(--text-base);
}

.account-empty-orders p {
  max-width: 48ch;
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--leading-body);
}

.account-empty-orders .btn {
  min-width: 154px;
}

@media (max-width: 640px) {
  .account-orders-table > .account-empty-orders,
  .account-empty-orders {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .account-empty-orders .btn {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--space-1);
  }
}
.account-save-feedback { min-height: 20px; margin: 0; color: var(--accent-4); font-size: var(--text-sm); font-weight: var(--font-semibold); }

.order-detail-section .order-line,
.order-detail-section .order-total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto); align-items: center; column-gap: var(--space-5); }
.order-detail-section .order-line { min-height: 48px; padding-block: var(--space-3); }
.order-detail-section .order-note { display: flex; min-height: 42px; align-items: center; margin: 0; padding-block: var(--space-3); line-height: var(--leading-snug); }
.order-detail-section .order-total { min-height: 60px; padding-block: var(--space-4); }
.order-detail-section .order-line > strong,
.order-detail-section .order-total > strong { justify-self: end; text-align: right; }
@media (max-width: 520px) { .order-detail-section .order-line, .order-detail-section .order-total { grid-template-columns: minmax(0, 1fr) minmax(112px, auto); column-gap: var(--space-3); } }

.states-internal-notice { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-4); max-width: 860px; margin: var(--space-6) 0; padding: var(--space-5); border: 1px solid rgba(var(--color-warning-400-rgb), .45); border-left: 5px solid var(--color-warning-500); border-radius: var(--radius-md); background: var(--color-warning-50); color: var(--text-primary); }
.states-internal-notice > .material-symbols-outlined { color: var(--color-warning-700); font-size: var(--text-4xl); }
.states-internal-notice p { margin: var(--space-1) 0 0; }
.states-internal-notice [data-states-feedback]:empty { display: none; }
.states-internal-notice [data-states-feedback] { padding-top: var(--space-2); color: var(--accent-4); font-weight: var(--font-bold); }

.solution-category-grid,
.corporate-solutions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.solution-category-grid .info-card,
.corporate-solutions-grid .info-card { min-height: 180px; }
.corporate-solutions-section .section-heading p:not(.eyebrow) { max-width: 720px; margin: var(--heading-subtitle-gap) 0 0; color: var(--text-secondary); }
@media (max-width: 900px) { .solution-category-grid, .corporate-solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .solution-category-grid, .corporate-solutions-grid { grid-template-columns: 1fr; } }

.services-section .section-heading p:not(.eyebrow) { max-width: 680px; margin: var(--heading-subtitle-gap) 0 0; color: var(--text-secondary); }
.services-section .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services-section .service-card { position: relative; align-content: start; min-height: 245px; }
.service-scope { justify-self: start; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--background-alt); color: var(--accent-4); font-size: var(--text-2xs); font-weight: var(--font-bold); text-transform: uppercase; }
.service-coverage-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--accent-3); border-radius: var(--radius-md); background: var(--color-white); }
.service-coverage-note .material-symbols-outlined { color: var(--accent-alt); }
.service-coverage-note p { margin: 0; }
@media (max-width: 1100px) { .services-section .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .services-section .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .services-section .services-grid { grid-template-columns: 1fr; } }

.quote-origin-note:empty { display: none; }
.quote-origin-note { margin-top: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); background: var(--background-alt); color: var(--accent-4); font-weight: var(--font-semibold); }
.quote-range-status { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); background: rgba(var(--color-success-600-rgb), .12); color: var(--success); font-size: var(--text-sm); font-weight: var(--font-bold); }
.quote-range-status.is-out-of-range { background: rgba(var(--color-warning-400-rgb), .16); color: var(--color-warning-700); }
.quote-submit-feedback { min-height: 20px; margin: var(--space-3) 0 0; color: var(--accent-4); font-size: var(--text-sm); font-weight: var(--font-bold); }

.help-search { margin-bottom: 0; }
.help-search-status { max-width: 640px; margin: var(--space-3) auto var(--space-7); color: var(--text-secondary); font-size: var(--text-sm); }
.help-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .help-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .help-categories { grid-template-columns: 1fr; } }

.contact-origin-note { margin: 0; padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); background: var(--background-alt); color: var(--accent-4); font-size: var(--text-sm); font-weight: var(--font-bold); }
.contact-consent a { color: var(--accent-alt); font-weight: var(--font-bold); text-decoration: underline; text-underline-offset: 2px; }
.contact-operational-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border: 1px solid var(--accent-3); border-radius: var(--radius-md); background: var(--color-white); }
.contact-operational-note .material-symbols-outlined { color: var(--accent-alt); }
.contact-operational-note p { margin: 0; }

.legal-page-section { padding: var(--space-14) 0 var(--space-19); background: var(--background-alt); }
.legal-notice { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); padding: var(--space-5); border: 1px solid rgba(var(--color-warning-400-rgb), .5); border-left: 5px solid var(--color-warning-500); border-radius: var(--radius-md); background: var(--color-warning-50); }
.legal-notice > .material-symbols-outlined { color: var(--color-warning-700); font-size: var(--text-4xl); }
.legal-notice p { margin: var(--space-1) 0 0; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.legal-index { position: sticky; top: 100px; display: grid; gap: var(--space-1); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--color-white); }
.legal-index strong { margin-bottom: var(--space-2); color: var(--text-heading); }
.legal-index a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-sm); }
.legal-index a:hover { background: var(--background-alt); color: var(--accent-alt); }
.legal-content { padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-1); }
.legal-content > header { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.legal-content > header h2 { margin: var(--space-1) 0 var(--space-2); }
.legal-content > header p:last-child { margin-bottom: 0; }
.legal-content > section { scroll-margin-top: var(--space-28); padding: var(--space-6) 0; border-bottom: 1px solid var(--border); }
.legal-content > section h3 { margin: 0 0 var(--space-3); color: var(--accent-4); }
.legal-content > section p { margin: 0; line-height: var(--leading-loose); }
.legal-crosslinks { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-6); }
.legal-crosslinks a { color: var(--accent-alt); font-weight: var(--font-bold); }
.checkout-page .checkbox-card a { color: var(--accent-alt); font-weight: var(--font-bold); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 840px) { .legal-layout { grid-template-columns: 1fr; } .legal-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-index strong { grid-column: 1 / -1; } }
@media (max-width: 520px) { .legal-page-section { padding: var(--space-9) 0 var(--space-14); } .legal-notice { grid-template-columns: 1fr; } .legal-layout { gap: var(--space-5); } .legal-index { grid-template-columns: 1fr; } .legal-content { padding: var(--space-6); } }
.help-search-empty { display: grid; justify-items: center; gap: var(--space-2); margin-top: var(--space-6); padding: var(--space-8); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--background-alt); text-align: center; }
.help-search-empty[hidden] { display: none; }
.help-search-empty .material-symbols-outlined { color: var(--accent-alt); font-size: var(--text-5xl); }
.help-search-empty p { margin: 0 0 var(--space-2); }
.help-operational-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-10); padding: var(--space-4); border: 1px solid var(--accent-3); border-radius: var(--radius-md); background: var(--background-alt); }
.help-operational-note .material-symbols-outlined { color: var(--accent-alt); }
.help-operational-note p { margin: 0; }
.faq-body a { color: var(--accent-alt); font-weight: var(--font-bold); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 980px) {
  .quote-page-layout,
  .quote-option-grid,
  .quote-field-grid,
  .quote-check-grid,
  .quote-timeline { grid-template-columns: 1fr; }

  .quote-page-aside {
    position: static;
    top: auto;
  }

  .quote-timeline::before,
  .quote-timeline::after { display: none; }

  .has-transparent-header .site-header.is-scrolled .mobile-menu-toggle {
    border-color: rgba(var(--color-white-rgb), 0.55);
    background: rgba(var(--color-white-rgb), 0.08);
    color: var(--color-white);
  }
}

/* Hero de inicio: proporción y navegación equivalentes al carrusel corporativo. */
.home-page .sitemap-hero {
  height: auto;
  min-height: 0;
  background: var(--color-white);
}

.home-page .sitemap-hero .hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4001 / 1667;
  overflow: hidden;
}

.home-page .sitemap-hero .hero-slide {
  inset: 0;
  z-index: var(--z-content);
  opacity: 1;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-standard);
}

.home-page .sitemap-hero .hero-slide.is-active {
  z-index: var(--z-control);
  transform: translateX(0);
}

.home-page .sitemap-hero .hero-slide.is-before {
  transform: translateX(-100%);
}

.home-page .sitemap-hero .hero-slide > img {
  transform: none;
  animation: none;
}

.home-page .sitemap-hero .hero-controls {
  position: static;
  z-index: var(--z-floating);
  display: flex;
  width: 100%;
  min-height: 36px;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
  transform: none;
  background: var(--background-alt);
}

.home-page .sitemap-hero .hero-controls button {
  width: 12px;
  height: 12px;
  border: 0;
  background: var(--color-neutral-300);
  box-shadow: none;
}

.home-page .sitemap-hero .hero-controls button.is-active {
  width: 12px;
  background: var(--accent-alt);
  transform: scale(1.15);
}

@media (max-width: 640px) {
  .home-page .sitemap-hero {
    height: auto;
    min-height: 0;
  }
}

/* Inicio: los cuatro servicios forman una fila compacta y centrada. */
.home-page .services-section .services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: calc(var(--container) - var(--space-20));
  gap: var(--space-6);
}

.home-page .services-section .section-heading {
  margin-bottom: var(--space-6);
}

.home-page .services-section .service-card {
  gap: var(--space-2);
  min-height: 0;
}

.home-page .services-section .service-card-image,
.home-page .services-section .service-card .material-symbols-outlined {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .home-page .services-section .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .home-page .services-section .services-grid {
    grid-template-columns: 1fr;
  }
}

/* Heroes interiores: título, bajada y acciones siempre centrados. */
body:not(.home-page) .page-hero.image-hero .section-hero-content,
body:not(.home-page) .shop-campaign-hero .shop-campaign-content {
  align-items: center;
  justify-items: center;
  align-content: center;
  text-align: center;
}

body:not(.home-page) .page-hero.image-hero .section-hero-content > *,
body:not(.home-page) .shop-campaign-hero .shop-campaign-content > * {
  margin-inline: auto;
}

/* El componente compartido conserva la escala original de Tienda y categorías. */
.shop-page .shop-benefits h3 {
  margin: 0;
  color: var(--text-heading);
  font-size: var(--text-base);
  text-transform: uppercase;
}

/* Home: adicionales y condiciones antes de Servicios. */
.home-additions {
  padding: var(--space-18) 0 var(--space-38);
  background: var(--background-alt);
}

.home-additions-heading {
  margin-bottom: var(--space-6);
  text-align: center;
}

.home-additions-heading h2 {
  margin: 0;
  color: var(--accent-4);
  font-size: clamp(var(--text-5xl), 4vw, var(--text-6xl));
}

.home-additions-list {
  max-width: 1164px;
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .home-additions { padding: var(--space-13) 0 var(--space-21); }
  .home-additions-heading { margin-bottom: var(--space-5); }
}

.hero-section.shop-banner-hero {
  height: auto;
  min-height: 0;
  background: var(--background-alt);
}

.shop-banner-hero .hero-stage {
  position: relative;
  width: 100%;
  height: clamp(480px, 41.7vw, 585px);
  overflow: hidden;
  background: var(--color-bluegray-400);
}

.shop-banner-hero .hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.shop-banner-hero .hero-slide.is-active {
  z-index: var(--z-content);
  opacity: 1;
  pointer-events: auto;
}

.shop-banner-hero .hero-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  animation: none;
}

.shop-banner-overlay {
  position: absolute;
  z-index: var(--z-content);
  inset: 0;
  background: rgba(var(--color-navy-900-rgb), .48);
}

.shop-banner-content {
  position: relative;
  z-index: var(--z-control);
  display: flex;
  min-height: 100%;
  padding: var(--space-16) var(--space-6);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.shop-banner-content .eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-white);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shop-banner-content h1,
.shop-banner-content h2,
.shop-banner-content .shop-banner-title {
  max-width: 1120px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-5xl), 4vw, var(--text-7xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-display);
  text-transform: uppercase;
}

.shop-banner-content > p:not(.eyebrow):not(.shop-banner-title) {
  max-width: 680px;
  margin: var(--space-5) 0 0;
  color: var(--color-white);
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
}

.shop-banner-content .btn {
  margin-top: var(--space-8);
  min-width: 168px;
}

.shop-banner-hero .hero-controls {
  position: static;
  z-index: var(--z-floating);
  display: flex;
  width: 100%;
  min-height: 88px;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  transform: none;
  background: var(--background-alt);
}

.shop-banner-hero .hero-controls button,
.shop-banner-hero .hero-controls button.is-active {
  width: 10px;
  height: 10px;
  border: 0;
  background: var(--color-bluegray-400);
  box-shadow: none;
  transform: none;
}

.shop-banner-hero .hero-controls button.is-active {
  background: var(--accent-alt);
}

@media (max-width: 640px) {
  .shop-banner-hero .hero-stage {
    height: clamp(400px, 118vw, 510px);
  }

  .shop-banner-content { padding: var(--space-11) var(--space-5); }
  .shop-banner-content .eyebrow { font-size: var(--text-sm); }
  .shop-banner-content h1,
  .shop-banner-content h2,
  .shop-banner-content .shop-banner-title { font-size: clamp(var(--text-4xl), 10vw, var(--text-5xl)); }
  .shop-banner-content > p:not(.eyebrow):not(.shop-banner-title) { font-size: var(--text-base); }
  .shop-banner-content .btn { margin-top: var(--space-6); }
  .shop-banner-hero .hero-controls { min-height: 56px; gap: var(--space-3); }
}

/* La promoción superior pertenece únicamente al Home. */
body:not(.home-page) .top-strip { display: none; }

/* Fichas de categoría: base visual compartida para terminado y a medida. */
.product-page .page-hero.image-hero {
  min-height: 500px;
}

.product-page .page-hero .section-hero-content {
  min-height: 500px;
  padding-block: var(--space-18);
}

.product-page .page-hero .section-hero-content .eyebrow {
  margin-bottom: var(--space-1);
  color: var(--color-white);
  font-size: var(--text-lg);
  text-transform: none;
}

.product-page .page-hero .section-hero-content .btn { margin-top: var(--space-3); }

.pdp-hero-dots {
  display: flex;
  min-height: 54px;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  background: var(--color-white);
}

.pdp-hero-dots span {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-round);
  background: var(--color-bluegray-400);
}

.pdp-hero-dots .is-active { background: var(--accent-alt); }

.product-page .pdp-secondary { padding-bottom: var(--space-18); }
.product-page .pdp-secondary-layout { display: block; }
.product-page .pdp-secondary-main { max-width: none; }
.product-page .pdp-secondary-main #faq { display: none; }
.product-page .pdp-addon-sidebar { position: static; margin-top: var(--space-14); }
.product-page .pdp-addon-sidebar .addon-section {
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.product-page .pdp-addon-sidebar .addon-section > h2 {
  font-size: clamp(var(--text-4xl), 3vw, var(--text-6xl));
}

.product-page .pdp-addon-sidebar .addon-section > p {
  max-width: 560px;
  margin: var(--space-2) auto var(--space-7);
  font-size: var(--text-base);
}

.product-page .pdp-addon-sidebar .addon-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.product-page .pdp-addon-sidebar .addon-item {
  display: flex;
  min-width: 0;
  padding: var(--space-4);
  flex-direction: column;
  align-items: stretch;
  background: var(--color-white);
  text-align: left;
}

.product-page .pdp-addon-sidebar .addon-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.product-page .pdp-addon-sidebar .addon-actions {
  display: flex;
  margin-top: auto;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
}

.product-reviews,
.product-services,
.related-solutions,
.product-inspiration { padding: var(--space-19) 0; background: var(--color-white); }

.product-reviews h2,
.product-services h2,
.related-solutions h2 {
  margin: 0 0 var(--space-9);
  color: var(--accent-4);
  font-size: var(--section-title-size);
  text-align: center;
}

.product-reviews h2 span,
.related-solutions h2 span { color: var(--accent-alt); }

.reviews-summary {
  display: grid;
  max-width: 980px;
  margin: auto;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.reviews-score { display: grid; gap: var(--space-1); justify-items: start; }
.reviews-score strong { color: var(--accent-4); font-size: var(--text-4xl); }
.reviews-score span { color: var(--accent-alt); font-size: var(--text-2xl); letter-spacing: var(--tracking-wider); }
.reviews-score small,
.reviews-score a { font-size: var(--text-xs); }
.reviews-bars { display: grid; gap: var(--space-2); }
.reviews-bars > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; color: var(--accent-alt); font-weight: var(--font-bold); }
.reviews-bars i { height: 20px; border: 1px solid var(--accent-alt); background: var(--color-white); }
.reviews-bars b { display: block; height: 100%; background: var(--accent-alt); }

.product-shared-faq { padding: var(--space-5) 0 var(--space-20); background: var(--color-white); }
.product-shared-faq .faq-list { gap: var(--faq-list-gap); }

.product-services { text-align: center; }
.product-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10); }
.product-services-grid a { display: grid; gap: var(--space-5); justify-items: center; color: var(--accent-4); }
.product-services-grid .material-symbols-outlined { display: grid; width: 116px; height: 116px; place-items: center; border: 5px solid var(--accent-alt); border-radius: var(--radius-round); color: var(--accent-alt); font-size: var(--text-6xl); }
.product-services-grid strong { max-width: 170px; text-transform: uppercase; }

.related-tabs { display: flex; margin-bottom: var(--space-9); gap: var(--space-8); justify-content: center; flex-wrap: wrap; }
.related-tabs a { padding-bottom: var(--space-1); color: var(--color-bluegray-400); font-size: var(--text-sm); text-transform: uppercase; }
.related-tabs a.is-active { border-bottom: 2px solid var(--accent-alt); color: var(--accent-4); }
.related-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-14); }
.related-products-grid article { display: grid; align-content: start; }
.related-product-media { min-height: 210px; background-size: cover; background-position: center; }
.related-products-grid h3 { margin: var(--space-4) 0 var(--space-2); color: var(--accent-4); font-size: var(--text-lg); }
.related-products-grid p { min-height: 66px; margin: 0 0 var(--space-4); color: var(--text-secondary); }
.related-products-grid .btn { justify-self: start; }

.product-contact-cta { padding: var(--space-16) 0; background: var(--color-neutral-100); text-align: center; }
.product-contact-cta h2 { margin: 0 0 var(--space-6); color: var(--accent-4); font-size: var(--text-3xl); }

.product-inspiration .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.product-inspiration img { width: 100%; height: 390px; object-fit: cover; }

@media (max-width: 800px) {
  .product-page .page-hero.image-hero,
  .product-page .page-hero .section-hero-content { min-height: 420px; }
  .product-page .pdp-addon-sidebar .addon-list,
  .product-services-grid { grid-template-columns: repeat(2, 1fr); }
  .related-products-grid { grid-template-columns: 1fr; gap: var(--space-9); }
  .related-product-media { min-height: 280px; }
  .product-inspiration .container { gap: var(--space-3); }
  .product-inspiration img { height: 240px; }
}

@media (max-width: 520px) {
  .reviews-summary { grid-template-columns: 1fr; gap: var(--space-6); }
  .product-page .pdp-addon-sidebar .addon-list { grid-template-columns: 1fr; }
  .product-services-grid { gap: var(--space-7) var(--space-3); }
  .product-services-grid .material-symbols-outlined { width: 82px; height: 82px; border-width: 4px; font-size: var(--text-4xl); }
  .product-services-grid strong { font-size: var(--text-xs); }
  .product-inspiration .container { grid-template-columns: 1fr; }
  .product-inspiration img { height: 300px; }
}

/* Todas las categorías usan la misma plantilla de catálogo. */
.category-listing-page .page-hero.shop-hero,
.category-listing-page .page-hero.shop-hero .section-hero-content {
  min-height: 430px;
}

.category-listing-page .page-hero.shop-hero {
  padding: 0;
  background-position: center;
  background-size: cover;
}

.category-listing-page .page-hero.shop-hero::after {
  background: rgba(var(--color-navy-900-rgb), 0.52);
}

.category-listing-page .page-hero.shop-hero .section-hero-content {
  display: flex;
  padding-block: var(--space-16);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.category-listing-page .page-hero.shop-hero h1 {
  max-width: 900px;
  margin: 0 0 var(--space-4);
  font-size: clamp(var(--text-5xl), 5vw, var(--text-8xl));
}

.category-listing-page .page-hero.shop-hero p {
  max-width: 720px;
  margin: 0;
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
}

.category-listing-page .shop-benefits,
.category-listing-page .home-search-cta { display: none; }
.category-listing-page .home-search-panel { min-height: 0; }
.category-listing-page .section-breadcrumb {
  padding: var(--space-8) 0 var(--space-2);
  background: var(--background-alt);
}
.category-listing-page .shop-section { padding-top: var(--space-7); }

.category-listing-page .filters-panel .panel-header {
  display: flex;
  min-height: 58px;
}

.category-listing-page .filters-panel .panel-header .text-link {
  color: var(--accent-alt);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.category-listing-page .product-grid { align-items: stretch; }
.category-listing-page .product-card { height: 100%; }
.category-listing-page .product-body { height: 100%; }
.category-listing-page .product-body .btn-block,
.category-listing-page .product-body .notify-form { margin-top: auto; }

@media (max-width: 640px) {
  .category-listing-page .page-hero.shop-hero,
  .category-listing-page .page-hero.shop-hero .section-hero-content { min-height: 360px; }
}

/* Todos los heroes presentan contenido y CTA centrados. */
.home-page .sitemap-hero .hero-slide > .hero-overlay {
  z-index: var(--z-content);
  background: rgba(var(--color-navy-900-rgb), .5);
}

.home-page .sitemap-hero .hero-slide-content {
  position: relative;
  z-index: var(--z-control);
  display: flex;
  min-height: 100%;
  padding: var(--space-18) var(--space-6);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-page .sitemap-hero .hero-slide-content > * { margin-inline: auto; }
.home-page .sitemap-hero .hero-slide-content .eyebrow {
  margin-bottom: var(--space-3);
  color: var(--color-white);
  font-weight: var(--font-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home-page .sitemap-hero .hero-slide-content h1,
.home-page .sitemap-hero .hero-slide-content h2 {
  max-width: 960px;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-white);
  line-height: var(--leading-display);
}

.home-page .sitemap-hero .hero-slide-content > p:not(.eyebrow) {
  max-width: 680px;
  margin-top: var(--space-5);
  margin-bottom: 0;
  color: var(--color-white);
  font-size: clamp(var(--text-lg), 1.8vw, var(--text-xl));
}

.home-page .sitemap-hero .hero-slide-content .btn { margin-top: var(--space-8); }

.page-hero.image-hero .section-hero-content .btn,
.shop-banner-content .btn,
.shop-campaign-content .btn { align-self: center; }

@media (max-width: 640px) {
  .home-page .sitemap-hero .hero-slide-content { padding: var(--space-14) var(--space-5); }
  .home-page .sitemap-hero .hero-slide-content h1,
  .home-page .sitemap-hero .hero-slide-content h2 { font-size: clamp(var(--text-4xl), 10vw, var(--text-6xl)); }
}

/* Ajustes UX posteriores a la auditoría móvil. */
@media (max-width: 640px) {
  .home-page .sitemap-hero .hero-stage {
    height: 500px;
    aspect-ratio: auto;
  }

  .home-page .sitemap-hero .hero-slide-content {
    min-height: 500px;
  }

  .home-page .sitemap-hero .hero-controls,
  .shop-banner-hero .hero-controls {
    min-height: 56px;
    gap: 0;
  }

  .home-page .sitemap-hero .hero-controls button,
  .home-page .sitemap-hero .hero-controls button.is-active,
  .shop-banner-hero .hero-controls button,
  .shop-banner-hero .hero-controls button.is-active {
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent;
    transform: none;
  }

  .home-page .sitemap-hero .hero-controls button::before,
  .shop-banner-hero .hero-controls button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--color-bluegray-400);
    content: "";
    transform: translate(-50%, -50%);
  }

  .home-page .sitemap-hero .hero-controls button.is-active::before,
  .shop-banner-hero .hero-controls button.is-active::before {
    background: var(--accent-alt);
    transform: translate(-50%, -50%) scale(1.15);
  }

  .product-page .whatsapp-float { display: grid; }

  .product-page .pdp-addon-sidebar .addon-list,
  .product-page .related-products-grid,
  .product-page .product-inspiration .container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 330px);
    grid-template-columns: none;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
  }

  .product-page .pdp-addon-sidebar .addon-item,
  .product-page .related-products-grid article,
  .product-page .product-inspiration img { scroll-snap-align: start; }
}

/* Cards de catálogo: el naranja queda como acento, no como color dominante. */
.product-card .price-row strong {
  color: var(--accent-4);
}

.product-card .btn-primary {
  border-color: var(--accent-alt);
  background: var(--color-white);
  color: var(--accent-alt);
}

.product-card .btn-primary:hover,
.product-card .btn-primary:focus-visible {
  border-color: var(--accent-alt);
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
}

/* Variantes de tarjetas de servicios. La interacción compartida se aplica al final. */
.services-page .services-grid { gap: var(--space-6); }
.services-page .service-card {
  grid-template-rows: 24px 42px auto 1fr;
  gap: var(--space-4);
  padding: var(--space-7);
  min-height: 245px;
}
.services-page .service-card strong { font-size: var(--text-lg); text-transform: none; }
.services-page .service-card small { font-size: var(--text-sm); line-height: var(--leading-body); }
.services-page .split-heading {
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-10);
  text-align: center;
}
.services-page .split-heading > div { width: 100%; max-width: 740px; }
.services-page .split-heading .eyebrow { margin: 0 0 var(--space-3); }
.services-page .split-heading h2 { margin: 0 0 var(--space-4); }
.services-page .split-heading h2 + p { margin: 0; line-height: var(--leading-relaxed); }
main .section-breadcrumb.breadcrumb-integrated {
  grid-column: 1 / -1;
  padding: 0 0 var(--space-6);
  border: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 760px) {
  .services-page .split-heading { flex-direction: column; margin-bottom: var(--space-8); }
}

.services-page .section-breadcrumb.breadcrumb-integrated { padding-bottom: var(--space-10); }
@media (max-width: 760px) {
  .services-page .section-breadcrumb.breadcrumb-integrated { padding-bottom: var(--space-8); }
}

/* Buscador compartido: misma apariencia en Inicio, catálogo y Ayuda. */
body .search-form.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  width: 100%;
  min-height: 70px;
  border: 0;
  border-radius: var(--radius-4);
  background: var(--color-neutral-200);
  box-shadow: none;
  overflow: hidden;
}
body .search-form.search-form:focus-within {
  box-shadow: 0 0 0 2px var(--color-bluegray-400);
}
body .search-form.search-form input {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 0;
  background: transparent;
  font-size: var(--text-base);
}
body .search-form.search-form > button {
  display: grid;
  place-items: center;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius-4) var(--radius-4) 0;
  background: var(--color-bluegray-400);
  color: var(--text-on-accent);
}
body .search-form.search-form.has-search-suggestions { overflow: visible; }
.help-search, .help-search-status { max-width: 880px; }
@media (max-width: 640px) {
  body .search-form.search-form { min-height: 60px; grid-template-columns: minmax(0, 1fr) 60px; }
  body .search-form.search-form input { padding: var(--space-4); }
}

.section-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.section-heading > div {
  width: min(100%, 780px);
}

.section-heading p:not(.eyebrow) {
  margin-inline: auto;
}

.section-heading.split-heading > .text-link,
.home-page .category-section .text-link,
.home-page .home-featured .text-link {
  position: static;
  align-self: center;
  margin: 0;
  text-align: center;
}

.home-page .category-section .section-heading,
.home-page .home-featured .section-heading,
.home-page .useful-section .section-heading,
.home-page .services-section .section-heading,
.home-page .solutions-showcase .section-heading {
  justify-content: center;
  text-align: center;
}

.home-page .blog-section .section-heading {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.home-page .blog-section .section-heading > div {
  width: 100%;
  max-width: none;
}

/* Botones corporativos: ButtonBig/ButtonSmall y ThemeConfig de Glasstech-web-front.
   xl = 1536px (MUI). Se conserva el layout de los CTA y la variante circular de cards. */
:root {
  --button-radius: var(--radius-2);
  --button-height: var(--space-11);
  --button-font-size: var(--text-2xs);
  --button-padding-x: var(--space-5);
  --button-small-height: var(--space-8);
  --button-small-font-size: var(--text-2xs);
  --button-small-padding-x: var(--space-4);
  --button-small-tracking: var(--tracking-wider);
}
body .btn:not(.btn-icon),
body .btn.btn-primary:not(.btn-icon),
body .btn.btn-secondary:not(.btn-icon),
body .btn.btn-ghost:not(.btn-icon) {
  min-height: var(--button-height);
  height: auto;
  max-width: 100%;
  padding: var(--space-2) var(--button-padding-x);
  border: 2px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-body);
  font-size: var(--button-font-size);
  font-weight: var(--font-semibold);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-wider);
  text-align: center;
  text-transform: uppercase;
  box-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease, border-color var(--duration-normal) ease, transform var(--duration-fast) ease-out;
}
body .btn.btn-primary:not(.btn-icon) { background: var(--accent-alt); border-color: transparent; color: var(--text-on-accent-alt); }
body .btn.btn-secondary:not(.btn-icon) { background: var(--accent); border-color: transparent; color: var(--text-on-accent); }
body .btn.btn-ghost:not(.btn-icon) { background: transparent; border-color: var(--accent-alt); color: var(--accent-alt); }
body .btn.btn-small:not(.btn-icon) {
  min-height: var(--button-small-height);
  padding: var(--space-1) var(--button-small-padding-x);
  font-size: var(--button-small-font-size);
  line-height: var(--leading-tight);
  letter-spacing: var(--button-small-tracking);
}
body .btn:not(.btn-icon):focus-visible { outline: 3px solid var(--accent-4); outline-offset: 3px; }
body .btn:not(.btn-icon):active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  body .btn.btn-primary:not(.btn-icon):hover { background: var(--color-orange-700); color: var(--color-white); }
  body .btn.btn-secondary:not(.btn-icon):hover { background: var(--color-bluegray-600); color: var(--color-white); }
  body .btn.btn-ghost:not(.btn-icon):hover { background: var(--accent-alt); color: var(--text-on-accent-alt); }
}
body .btn.btn-disabled:not(.btn-icon),
body .btn:not(.btn-icon):disabled,
body .btn:not(.btn-icon)[aria-disabled="true"] {
  background: var(--surface); border-color: transparent; color: var(--color-bluegray-600);
  cursor: not-allowed; box-shadow: none; transform: none;
}
@media (min-width: 1536px) {
  :root {
    --button-height: var(--space-14);
    --button-font-size: var(--text-base);
    --button-padding-x: var(--space-9);
    --button-small-height: var(--space-8);
    --button-small-font-size: var(--text-sm);
    --button-small-padding-x: var(--space-9);
    --button-small-tracking: var(--tracking-wider);
  }
}
@media (prefers-reduced-motion: reduce) {
  body .btn:not(.btn-icon) { transition: none; }
  body .btn:not(.btn-icon):active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
}

.home-page .quote-section {
  padding: var(--space-16) 0 var(--space-18);
  border-block: 1px solid rgba(var(--color-white-rgb), 0.9);
  background: var(--accent-4);
}

.home-page .quote-section::after {
  content: none;
}

.home-page .quote-panel {
  grid-template-columns: minmax(0, 1fr) minmax(440px, clamp(440px, 36vw, 620px));
  gap: var(--space-15) clamp(var(--space-8), 4vw, var(--space-19));
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.home-page .quote-kicker {
  display: inline-flex;
  width: max-content;
  margin-bottom: var(--space-9);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-bluegray-400);
  background: var(--color-white);
  color: var(--accent-4);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.home-page .quote-copy h2 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(var(--text-5xl), 4vw, var(--text-7xl));
  line-height: var(--leading-display);
}

.home-page .quote-copy p:not(.eyebrow) {
  max-width: 640px;
  margin-top: var(--space-7);
  color: rgba(var(--color-white-rgb), 0.9);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.home-page .quote-actions {
  gap: var(--space-3);
  margin-top: var(--space-9);
}

body.home-page .quote-actions .btn.btn-secondary:not(.btn-icon) {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--accent-4);
}

@media (hover: hover) and (pointer: fine) {
  body.home-page .quote-actions .btn.btn-secondary:not(.btn-icon):hover {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-100);
    color: var(--accent-4);
  }
}

.home-page .quote-visual-card {
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-8);
  border: 0;
  border-radius: var(--radius-4);
  background: var(--color-neutral-300);
  box-shadow: none;
}

.home-page .home-quote-product {
  display: grid;
  gap: var(--space-2);
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}

.home-page .home-quote-product select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 3px solid var(--accent-alt);
  background: transparent;
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

.home-page .quote-visual-card h3 {
  width: max-content;
  max-width: 100%;
  padding: 0 var(--space-2) var(--space-1);
  border-bottom: 3px solid var(--accent-alt);
  color: var(--accent-4);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-display);
  text-transform: none;
}

.home-page .quote-values {
  gap: var(--space-3);
}

.home-page .quote-values label:last-child {
  grid-column: auto;
}

.home-page .quote-values label {
  gap: var(--space-2);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-2);
  background: var(--color-white);
  color: var(--color-bluegray-600);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-display);
}

.home-page .quote-values input,
.home-page .quote-values select {
  min-height: 38px;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-top: 1px solid var(--color-bluegray-400);
  border-radius: 0;
  background: var(--color-white);
  color: var(--accent-4);
  -webkit-text-fill-color: var(--accent-4);
  caret-color: var(--accent-alt);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  opacity: 1;
  transition: border-color var(--duration-normal) ease, outline-color var(--duration-normal) ease;
}

.home-page .quote-values input::placeholder {
  color: var(--color-bluegray-600);
  -webkit-text-fill-color: var(--color-bluegray-600);
  font-weight: var(--font-medium);
  opacity: 1;
}

.home-page .quote-values input:focus-visible,
.home-page .quote-values select:focus-visible {
  border-top-color: transparent;
  outline: 2px solid var(--accent-alt);
  outline-offset: 1px;
}

.home-page .quote-total {
  align-items: center;
  padding-top: var(--space-4);
  border-top-color: var(--color-bluegray-400);
}

.home-page .quote-total small {
  color: var(--accent-4);
  font-size: var(--text-base);
}

.home-page .quote-total p {
  color: var(--accent-4);
  font-size: var(--text-4xl);
  line-height: var(--leading-none);
}

.home-page .home-quote-timeline {
  gap: var(--space-18);
}

.home-page .home-quote-timeline::before {
  display: block;
  top: 50%;
  transform: translateY(-50%);
  left: 36px;
  right: 36px;
  z-index: var(--z-content);
  height: 2px;
  background: var(--accent-alt);
}

.home-page .home-quote-timeline::after,
.home-page .home-quote-timeline .quote-timeline-step:not(:last-child)::after {
  content: none;
  display: none;
}

.home-page .home-quote-timeline .quote-timeline-step {
  display: block;
  min-height: 164px;
  padding: var(--space-16) var(--space-6) var(--space-6);
  border: 0;
  border-radius: var(--radius-4);
  background: var(--color-neutral-300);
  box-shadow: none;
  color: var(--accent-4);
  animation: none;
}

.home-page .home-quote-timeline .quote-timeline-step:hover {
  border-color: transparent;
  background: var(--color-neutral-300);
  box-shadow: none;
  transform: none;
}

.home-page .home-quote-timeline .quote-step-number {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: var(--z-control);
  width: 40px;
  height: 40px;
  margin: 0;
  border: 0;
  background: var(--color-white);
  color: var(--accent-4);
  font-size: var(--text-xl);
  animation: none;
}

.home-page .home-quote-timeline .quote-timeline-step:first-child .quote-step-number {
  background: var(--accent-alt);
  color: var(--text-on-accent-alt);
}

.home-page .home-quote-timeline .quote-timeline-step h3 {
  margin: 0 0 var(--space-3);
  color: var(--accent-4);
  font-size: var(--text-base);
  line-height: var(--leading-heading);
  text-transform: none;
}

.home-page .home-quote-timeline .quote-timeline-step small {
  color: var(--color-bluegray-700);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

@media (max-width: 980px) {
  .home-page .quote-panel {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .home-page .quote-visual {
    justify-items: start;
  }

  .home-page .home-quote-timeline {
    gap: var(--space-6);
  }
}

@media (max-width: 700px) {
  .home-page .quote-section {
    padding: var(--space-12) 0 var(--space-14);
  }

  .home-page .quote-kicker {
    margin-bottom: var(--space-6);
  }

  .home-page .quote-copy h2 {
    font-size: var(--text-4xl);
  }

  .home-page .quote-actions,
  .home-page .quote-actions .btn,
  .home-page .quote-visual-card {
    width: 100%;
  }

  .home-page .quote-values {
    grid-template-columns: 1fr;
  }

  .home-page .home-quote-timeline {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .home-page .home-quote-timeline::before {
    display: none;
  }

  .home-page .home-quote-timeline .quote-timeline-step {
    min-height: 0;
  }
}