/* ---- css/fonts.css ---- */
/* Plus Jakarta Sans (SIL Open Font License 1.1), fuente variable, subconjunto latin.
   Alojada aqui para no depender de fonts.googleapis.com (pagina en blanco si no
   responde, CLS por el cambio de fuente y una peticion a Google por visita). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- css/tokens.css ---- */
/* ============================================================
   QUINTANA MEDICAL SERVICES — Design System Tokens
   WCAG 2.2 AA Compliant · "Bright Medical Premium" Direction
   ============================================================ */

:root {
  /* Surface & Base Backgrounds (60-70% ratio: Bright, luminous, warm) */
  --q-bg-primary:       #FAFAF7; /* Warm White */
  --q-bg-secondary:     #F5F3EC; /* Soft Ivory */
  --q-bg-surface:       #FFFFFF; /* Pure White Card Surface */
  --q-bg-surface-sage:  #DCE5DC; /* Soft Sage (Supporting surfaces) */
  --q-bg-dark:          #193D2A; /* Deep Forest Green (Footers, final CTA) */
  --q-bg-dark-overlay:  rgba(25, 61, 42, 0.94);

  /* Brand Greens (20-25% ratio: Structure, CTAs, Authority) */
  --q-green-deep:       #193D2A; /* Deep Forest Green - High Authority (11.5:1 on #FAFAF7) */
  --q-green-emerald:    #245640; /* Emerald Medical Green - Primary CTA (8.1:1 on #FAFAF7) */
  --q-green-hover:      #163725; /* Darker green hover state */
  --q-green-active:     #0F281B;

  /* Supporting Greens (5-10% ratio) */
  --q-sage:             #DCE5DC; /* Soft Sage */
  --q-eucalyptus:       #AABDAF; /* Muted Eucalyptus - Graphic lines, rings, borders */
  --q-mint-subtle:      #EDF4EF; /* Ultra-light mint tint for hover states */
  --q-leaf-accent:      #367B54;

  /* Restrained Warm Gold Accent (<5% ratio: Medical heritage & trust) */
  --q-gold:             #C4A45E; /* Warm Muted Gold */
  --q-gold-hover:       #B2924E;
  --q-gold-text:        #8A6F33; /* Darker Gold for accessible text (4.6:1 on #FAFAF7) */
  --q-gold-light:       #E8CE8C; /* Gold highlight on dark backgrounds */

  /* Typography Colors (High contrast & readability) */
  --q-text-main:        #1C2420; /* Dark slate ink - 15.2:1 contrast */
  --q-text-muted:       #4F5C55; /* Neutral medical slate - 6.7:1 contrast */
  --q-text-inverse:     #FAFAF7; /* Warm white text on dark green */
  --q-text-inverse-dim: #DCE5DC; /* Sage muted text on dark green */

  /* Borders & Dividers */
  --q-border-subtle:    #E4E8E2;
  --q-border-card:      #D9DED7;
  --q-border-medium:    #AABDAF;
  --q-border-gold:      rgba(196, 164, 94, 0.4);

  /* Functional & Feedback */
  --q-success:          #2E6B4E;
  --q-warning:          #8C6A1F;
  --q-error:            #A8402F;
  --q-focus-ring:       #193D2A;

  /* Typography Families (Biograph Editorial Quality Stack) */
  --q-font-serif:       Georgia, 'Times New Roman', serif;
  --q-font-sans:        'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --q-font-brand:       'Cinzel', serif;
  --q-font-italic:      Georgia, 'Times New Roman', serif;

  /* Typography Scale */
  --q-text-xs:          0.75rem;    /* 12px */
  --q-text-sm:          0.875rem;   /* 14px */
  --q-text-base:        1rem;       /* 16px */
  --q-text-lg:          1.125rem;   /* 18px */
  --q-text-xl:          1.25rem;    /* 20px */
  --q-text-2xl:         1.625rem;   /* 26px */
  --q-text-3xl:         2.125rem;   /* 34px */
  --q-text-4xl:         2.75rem;    /* 44px */
  --q-text-display:     3.5rem;     /* 56px */

  /* Spacing Scale (4px Base) */
  --q-sp-1:             4px;
  --q-sp-2:             8px;
  --q-sp-3:             12px;
  --q-sp-4:             16px;
  --q-sp-5:             20px;
  --q-sp-6:             24px;
  --q-sp-8:             32px;
  --q-sp-10:            40px;
  --q-sp-12:            48px;
  --q-sp-16:            64px;
  --q-sp-20:            80px;
  --q-sp-24:            96px;
  --q-sp-32:            128px;

  /* Radii */
  --q-radius-sm:        4px;
  --q-radius-md:        8px;
  --q-radius-lg:        16px;
  --q-radius-xl:        24px;
  --q-radius-pill:      9999px;

  /* Shadows (Sophisticated & Subtle) */
  --q-shadow-sm:        0 1px 3px rgba(25, 61, 42, 0.04);
  --q-shadow-card:      0 2px 10px rgba(25, 61, 42, 0.05);
  --q-shadow-hover:     0 8px 24px rgba(25, 61, 42, 0.08);
  --q-shadow-nav:       0 4px 20px rgba(25, 61, 42, 0.06);

  /* Motion */
  --q-ease-smooth:      cubic-bezier(0.25, 1, 0.5, 1);
  --q-duration-fast:    150ms;
  --q-duration-normal:  280ms;
  --q-duration-slow:    450ms;
}

/* ---- css/base.css ---- */
/* ============================================================
   QUINTANA MEDICAL SERVICES — Base Styles & Reset
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background-color: var(--q-bg-primary);
  color: var(--q-text-main);
  font-family: var(--q-font-sans);
  font-size: var(--q-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Accessibility: Skip Link */
.q-skip-link {
  position: absolute;
  top: -100px;
  left: var(--q-sp-4);
  background: var(--q-green-deep);
  color: var(--q-text-inverse);
  padding: var(--q-sp-3) var(--q-sp-6);
  z-index: 10000;
  border-radius: var(--q-radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--q-duration-fast) var(--q-ease-smooth);
}
.q-skip-link:focus {
  top: var(--q-sp-4);
  outline: 3px solid var(--q-focus-ring);
  outline-offset: 2px;
}

/* Accessible Focus States (WCAG 2.2 Focus Appearance) */
:focus-visible {
  outline: 2px solid var(--q-focus-ring);
  outline-offset: 3px;
}

/* Typography Primitives (Biograph-Level Editorial Serif) */
h1, h2, h3, h4, .q-serif-title {
  font-family: var(--q-font-serif);
  color: var(--q-green-deep);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
}

h4 {
  font-size: var(--q-text-lg);
  font-weight: 500;
}

em, .q-italic {
  font-family: var(--q-font-italic);
  font-style: italic;
  font-weight: 400;
}

p {
  color: var(--q-text-main);
  margin-bottom: var(--q-sp-4);
}

p.q-lead {
  font-size: var(--q-text-lg);
  line-height: 1.6;
  color: var(--q-text-muted);
}

@media (min-width: 768px) {
  p.q-lead {
    font-size: 1.2rem;
  }
}

a {
  color: var(--q-green-emerald);
  text-decoration: none;
  transition: color var(--q-duration-fast) var(--q-ease-smooth);
}
a:hover {
  color: var(--q-green-deep);
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Layout Utilities */
.q-container {
  width: 100%;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--q-sp-6);
  padding-right: var(--q-sp-6);
}

@media (min-width: 1024px) {
  .q-container {
    padding-left: var(--q-sp-8);
    padding-right: var(--q-sp-8);
  }
}

.q-section {
  padding-top: var(--q-sp-16);
  padding-bottom: var(--q-sp-16);
  position: relative;
}

@media (min-width: 1024px) {
  .q-section {
    padding-top: var(--q-sp-24);
    padding-bottom: var(--q-sp-24);
  }
}

.q-section-alt {
  background-color: var(--q-bg-secondary);
}

.q-section-dark {
  background-color: var(--q-bg-dark);
  color: var(--q-text-inverse);
}
.q-section-dark h1,
.q-section-dark h2,
.q-section-dark h3 {
  color: var(--q-text-inverse);
}
.q-section-dark p {
  color: var(--q-text-inverse-dim);
}

/* Section Header Shared */
.q-section-header {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--q-sp-12);
}

.q-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--q-sp-2);
  font-family: var(--q-font-sans);
  font-size: var(--q-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--q-gold-text);
  margin-bottom: var(--q-sp-3);
}

.q-eyebrow::before,
.q-eyebrow::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: var(--q-gold);
}

.q-eyebrow-dark {
  color: var(--q-gold-light);
}
.q-eyebrow-dark::before,
.q-eyebrow-dark::after {
  background-color: var(--q-gold-light);
}

.q-divider-arc {
  display: block;
  margin: var(--q-sp-6) auto 0;
  width: 48px;
  height: 2px;
  background-color: var(--q-eucalyptus);
  border-radius: var(--q-radius-pill);
}

/* ---- css/components.css ---- */
/* ============================================================
   QUINTANA MEDICAL SERVICES — UI Components
   "Bright Medical Premium" · High Conversion & Healthcare Ergonomics
   ============================================================ */

/* --- Buttons --- */
.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--q-sp-2);
  font-family: var(--q-font-sans);
  font-size: var(--q-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  border-radius: var(--q-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--q-duration-normal) var(--q-ease-smooth);
  white-space: nowrap;
}

.q-btn-primary {
  background-color: var(--q-green-emerald);
  color: #FFFFFF;
}
.q-btn-primary:hover {
  background-color: var(--q-green-hover);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(36, 86, 64, 0.25);
  transform: translateY(-1px);
}
.q-btn-primary:active {
  background-color: var(--q-green-active);
  transform: translateY(0);
}

.q-btn-secondary {
  background-color: transparent;
  border-color: var(--q-green-deep);
  color: var(--q-green-deep);
}
.q-btn-secondary:hover {
  background-color: var(--q-bg-secondary);
  color: var(--q-green-deep);
  border-color: var(--q-green-deep);
}

.q-btn-gold {
  background-color: var(--q-gold);
  color: var(--q-green-deep);
  font-weight: 700;
}
.q-btn-gold:hover {
  background-color: #D3B36B;
  color: var(--q-green-deep);
  box-shadow: 0 4px 16px rgba(196, 164, 94, 0.3);
  transform: translateY(-1px);
}

.q-btn-outline-light {
  background-color: transparent;
  border-color: rgba(250, 250, 247, 0.4);
  color: var(--q-text-inverse);
}
.q-btn-outline-light:hover {
  background-color: rgba(250, 250, 247, 0.1);
  border-color: var(--q-text-inverse);
  color: var(--q-text-inverse);
}

.q-btn-sm {
  padding: 8px 16px;
  font-size: var(--q-text-xs);
}

.q-btn-lg {
  padding: 16px 32px;
  font-size: var(--q-text-base);
}

/* --- Section 01: Sticky Header --- */
.q-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(250, 250, 247, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--q-border-subtle);
  transition: all var(--q-duration-normal) var(--q-ease-smooth);
}

.q-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: var(--q-shadow-nav);
}

.q-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  transition: height var(--q-duration-normal) var(--q-ease-smooth);
}

.q-header.is-scrolled .q-header-inner {
  height: 70px;
}

.q-brand-link {
  display: flex;
  align-items: center;
  gap: var(--q-sp-3);
  text-decoration: none;
  margin-right: clamp(16px, 2vw, 32px);
  flex-shrink: 0;
}

.q-header-logo {
  height: 52px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: all var(--q-duration-normal) var(--q-ease-smooth);
}

.q-header.is-scrolled .q-header-logo {
  height: 44px;
}

/* Desktop Navigation */
.q-nav {
  display: none;
}

@media (min-width: 1024px) {
  .q-nav {
    display: flex;
    align-items: center;
  }
}

.q-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: clamp(8px, 1.2vw, 18px);
}

.q-nav-item {
  position: relative;
  flex-shrink: 0;
}

.q-nav-link {
  font-family: var(--q-font-sans);
  font-size: clamp(0.8rem, 0.85vw, 0.875rem);
  font-weight: 500;
  color: var(--q-text-main);
  text-decoration: none;
  padding: var(--q-sp-2) 0;
  white-space: nowrap;
  transition: color var(--q-duration-fast) var(--q-ease-smooth);
  display: flex;
  align-items: center;
  gap: 4px;
}

.q-nav-link:hover,
.q-nav-item:hover > .q-nav-link {
  color: var(--q-green-emerald);
}

/* Dropdown Menu */
.q-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background-color: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-md);
  box-shadow: var(--q-shadow-hover);
  padding: var(--q-sp-3) 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--q-duration-fast) var(--q-ease-smooth);
  z-index: 1001;
}

.q-nav-item:hover .q-dropdown,
.q-nav-item:focus-within .q-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.q-dropdown-link {
  display: block;
  padding: 9px var(--q-sp-5);
  font-size: var(--q-text-sm);
  color: var(--q-text-main);
  text-decoration: none;
  transition: background-color var(--q-duration-fast) var(--q-ease-smooth);
}
.q-dropdown-link:hover {
  background-color: var(--q-bg-secondary);
  color: var(--q-green-emerald);
}

/* Header Utilities */
.q-header-actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-left: clamp(16px, 2.5vw, 36px);
  flex-shrink: 0;
}

.q-lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-pill);
  padding: 3px;
  background-color: #FFFFFF;
  margin-right: 2px;
}

.q-lang-btn {
  background: transparent;
  border: none;
  font-family: var(--q-font-sans);
  font-size: var(--q-text-xs);
  font-weight: 600;
  color: var(--q-text-muted);
  padding: 4px 10px;
  border-radius: var(--q-radius-pill);
  cursor: pointer;
  transition: all var(--q-duration-fast) var(--q-ease-smooth);
}
.q-lang-btn.active {
  background-color: var(--q-green-deep);
  color: #FFFFFF;
}

.q-phone-link {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--q-green-deep);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
  padding: 8px 16px;
  border-radius: var(--q-radius-pill);
  background: rgba(25, 61, 42, 0.05);
  border: 1px solid rgba(25, 61, 42, 0.12);
  transition: all var(--q-duration-fast) var(--q-ease-smooth);
}
.q-phone-link:hover {
  background: rgba(25, 61, 42, 0.1);
  color: var(--q-green-emerald);
  border-color: var(--q-green-emerald);
  transform: translateY(-1px);
}
.q-phone-link svg {
  color: var(--q-gold-text);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.q-phone-link span {
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .q-phone-link {
    display: inline-flex;
  }
}

.q-header-cta {
  display: none;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .q-header-cta {
    display: inline-flex;
  }
}

/* Mobile Hamburger Button */
.q-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--q-sp-1);
}
@media (min-width: 1024px) {
  .q-burger {
    display: none;
  }
}
.q-burger-line {
  width: 24px;
  height: 2px;
  background-color: var(--q-green-deep);
  border-radius: 2px;
  transition: all var(--q-duration-fast) var(--q-ease-smooth);
}
.q-burger.is-active .q-burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.q-burger.is-active .q-burger-line:nth-child(2) {
  opacity: 0;
}
.q-burger.is-active .q-burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Navigation Drawer */
.q-mobile-drawer {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100vh - 80px);
  background-color: #FFFFFF;
  padding: var(--q-sp-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--q-duration-normal) var(--q-ease-smooth);
  z-index: 999;
}
.q-mobile-drawer.is-open {
  transform: translateX(0);
}
.q-mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--q-sp-4);
}
.q-mobile-nav-link {
  font-family: var(--q-font-serif);
  font-size: 1.35rem;
  color: var(--q-green-deep);
  text-decoration: none;
  font-weight: 500;
  display: block;
}

/* --- Section 02: Hero --- */
.q-hero {
  position: relative;
  background: linear-gradient(180deg, var(--q-bg-primary) 0%, var(--q-bg-secondary) 100%);
  padding-top: var(--q-sp-12);
  padding-bottom: var(--q-sp-16);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .q-hero {
    padding-top: var(--q-sp-20);
    padding-bottom: var(--q-sp-24);
  }
}

.q-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-10);
  align-items: center;
}

@media (min-width: 1024px) {
  .q-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--q-sp-16);
  }
}

.q-hero-content {
  position: relative;
  z-index: 2;
}

.q-badge-location {
  display: inline-flex;
  align-items: center;
  gap: var(--q-sp-2);
  background-color: var(--q-bg-surface);
  border: 1px solid var(--q-border-subtle);
  padding: 6px 14px;
  border-radius: var(--q-radius-pill);
  font-size: var(--q-text-xs);
  font-weight: 600;
  color: var(--q-green-deep);
  margin-bottom: var(--q-sp-6);
  box-shadow: var(--q-shadow-sm);
}
.q-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--q-radius-pill);
  background-color: var(--q-leaf-accent);
}

.q-hero-title {
  margin-bottom: var(--q-sp-6);
  letter-spacing: -0.02em;
}

.q-hero-lead {
  margin-bottom: var(--q-sp-8);
  max-width: 580px;
}

.q-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--q-sp-4);
  margin-bottom: var(--q-sp-8);
}
@media (min-width: 480px) {
  .q-hero-ctas {
    flex-direction: row;
    align-items: center;
  }
}

.q-hero-guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-sp-4) var(--q-sp-6);
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
  font-weight: 500;
}
.q-hero-guarantee-item {
  display: flex;
  align-items: center;
  gap: var(--q-sp-2);
}
.q-hero-guarantee-item svg {
  color: var(--q-gold-text);
  flex-shrink: 0;
}

/* Hero Visual Art / Media */
.q-hero-visual {
  position: relative;
}

.q-hero-image-card {
  position: relative;
  background-color: var(--q-bg-surface);
  border-radius: var(--q-radius-xl);
  overflow: hidden;
  box-shadow: var(--q-shadow-hover);
  border: 1px solid var(--q-border-subtle);
  aspect-ratio: 4 / 4.8;
  display: flex;
  flex-direction: column;
}

.q-hero-editorial-art {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(145deg, #F5F3EC 0%, #E7ECE6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--q-sp-8);
  text-align: center;
}

.q-hero-ring-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  opacity: 0.35;
  pointer-events: none;
}

.q-hero-art-icon {
  width: 96px;
  height: 96px;
  margin-bottom: var(--q-sp-4);
  filter: drop-shadow(0 4px 12px rgba(25, 61, 42, 0.1));
}

.q-hero-art-caption {
  font-family: var(--q-font-serif);
  font-size: var(--q-text-xl);
  color: var(--q-green-deep);
  margin-bottom: var(--q-sp-2);
}
.q-hero-art-sub {
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
  max-width: 280px;
}

.q-hero-float-badge {
  position: absolute;
  bottom: var(--q-sp-6);
  left: var(--q-sp-6);
  right: var(--q-sp-6);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-md);
  padding: var(--q-sp-4) var(--q-sp-5);
  display: flex;
  align-items: center;
  gap: var(--q-sp-4);
  box-shadow: var(--q-shadow-sm);
}
.q-float-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--q-radius-pill);
  background-color: var(--q-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-green-deep);
  flex-shrink: 0;
}
.q-float-badge-title {
  font-size: var(--q-text-sm);
  font-weight: 700;
  color: var(--q-green-deep);
  line-height: 1.2;
}
.q-float-badge-desc {
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
  margin-bottom: 0;
}

/* --- Section 03: Medical Trust Bar --- */
.q-trust-bar {
  background-color: #FFFFFF;
  border-top: 1px solid var(--q-border-subtle);
  border-bottom: 1px solid var(--q-border-subtle);
  padding: var(--q-sp-8) 0;
}

.q-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--q-sp-6);
}
@media (min-width: 768px) {
  .q-trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .q-trust-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--q-sp-4);
  }
}

.q-trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--q-sp-3);
}
.q-trust-icon {
  width: 20px;
  height: 20px;
  color: var(--q-gold-text);
  flex-shrink: 0;
  margin-top: 2px;
}
.q-trust-text {
  font-size: var(--q-text-xs);
  font-weight: 600;
  color: var(--q-green-deep);
  line-height: 1.35;
}
.q-trust-sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--q-text-muted);
}

/* --- Section 04: Health Ecosystem --- */
.q-ecosystem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-6);
}
@media (min-width: 640px) {
  .q-ecosystem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .q-ecosystem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.q-eco-card {
  background-color: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-lg);
  padding: var(--q-sp-8);
  position: relative;
  transition: all var(--q-duration-normal) var(--q-ease-smooth);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.q-eco-card:hover {
  border-color: var(--q-border-medium);
  box-shadow: var(--q-shadow-hover);
  transform: translateY(-2px);
}

.q-eco-card-top {
  margin-bottom: var(--q-sp-6);
}
.q-eco-num {
  font-family: var(--q-font-serif);
  font-size: var(--q-text-sm);
  font-weight: 600;
  color: var(--q-gold-text);
  margin-bottom: var(--q-sp-3);
  display: inline-block;
}
.q-eco-title {
  font-size: var(--q-text-xl);
  margin-bottom: var(--q-sp-2);
}
.q-eco-role {
  font-size: var(--q-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--q-green-emerald);
  margin-bottom: var(--q-sp-3);
}
.q-eco-desc {
  font-size: var(--q-text-sm);
  color: var(--q-text-muted);
  line-height: 1.55;
  margin-bottom: 0;
}

.q-eco-card-bottom {
  border-top: 1px solid var(--q-border-subtle);
  padding-top: var(--q-sp-4);
  margin-top: var(--q-sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.q-eco-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--q-green-deep);
  background-color: var(--q-sage);
  padding: 3px 10px;
  border-radius: var(--q-radius-pill);
}

/* --- Section 05: Why Quintana (Editorial Pillars) --- */
.q-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-8);
}
@media (min-width: 1024px) {
  .q-pillars-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.q-pillar-item {
  background-color: var(--q-bg-primary);
  border: 1px solid var(--q-border-card);
  border-radius: var(--q-radius-lg);
  padding: var(--q-sp-8);
  position: relative;
}
.q-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--q-radius-md);
  background-color: var(--q-sage);
  color: var(--q-green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--q-sp-6);
}
.q-pillar-title {
  font-size: 1.35rem;
  margin-bottom: var(--q-sp-3);
}
.q-pillar-desc {
  font-size: var(--q-text-sm);
  color: var(--q-text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Section 06: Primary Care Anchor --- */
.q-split-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-10);
  align-items: center;
}
@media (min-width: 1024px) {
  .q-split-feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--q-sp-16);
  }
}

.q-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--q-sp-4);
  margin-top: var(--q-sp-6);
  margin-bottom: var(--q-sp-8);
}
.q-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--q-sp-3);
  font-size: var(--q-text-sm);
  color: var(--q-text-main);
}
.q-feature-bullet {
  width: 18px;
  height: 18px;
  color: var(--q-gold-text);
  flex-shrink: 0;
  margin-top: 3px;
}

.q-feature-card-wrapper {
  background: #FFFFFF;
  border-radius: var(--q-radius-xl);
  padding: var(--q-sp-8);
  border: 1px solid var(--q-border-subtle);
  box-shadow: var(--q-shadow-hover);
}
.q-stat-badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--q-sp-4);
  margin-top: var(--q-sp-6);
}
.q-stat-badge {
  background-color: var(--q-bg-secondary);
  border-radius: var(--q-radius-md);
  padding: var(--q-sp-4);
  text-align: center;
}
.q-stat-num {
  font-family: var(--q-font-serif);
  font-size: var(--q-text-2xl);
  font-weight: 600;
  color: var(--q-green-deep);
  display: block;
}
.q-stat-label {
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
}

/* --- Section 07: Longevity Focus --- */
.q-longevity-banner {
  background: linear-gradient(135deg, #193D2A 0%, #11281C 100%);
  color: var(--q-text-inverse);
  border-radius: var(--q-radius-xl);
  padding: var(--q-sp-10);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .q-longevity-banner {
    padding: var(--q-sp-16);
  }
}

.q-longevity-media-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 860px) {
  .q-longevity-media-wrap {
    opacity: 0.25;
    width: 100%;
  }
}

.q-longevity-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: contrast(1.08) brightness(1.02);
}

.q-longevity-media-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #193D2A 0%, rgba(25, 61, 42, 0.7) 25%, rgba(25, 61, 42, 0.15) 100%);
  z-index: 2;
}

.q-longevity-ring-graphic {
  display: none !important;
}

.q-longevity-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
.q-longevity-content h2 {
  color: var(--q-text-inverse);
  margin-bottom: var(--q-sp-4);
}
.q-longevity-content p {
  color: var(--q-text-inverse-dim);
  font-size: var(--q-text-base);
  margin-bottom: var(--q-sp-6);
}

.q-longevity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-sp-3);
  margin-bottom: var(--q-sp-8);
}
.q-longevity-tag {
  background-color: rgba(250, 250, 247, 0.12);
  border: 1px solid rgba(196, 164, 94, 0.35);
  color: var(--q-gold-light);
  padding: 6px 14px;
  border-radius: var(--q-radius-pill);
  font-size: var(--q-text-xs);
  font-weight: 600;
}

/* --- Section 08: Provider Spotlight --- */
.q-provider-card {
  background-color: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-xl);
  overflow: hidden;
  box-shadow: var(--q-shadow-hover);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .q-provider-card {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.q-provider-visual {
  background: linear-gradient(135deg, var(--q-bg-secondary) 0%, #E3E9E2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--q-sp-10);
  text-align: center;
  position: relative;
}
.q-provider-avatar-frame {
  width: 140px;
  height: 140px;
  border-radius: var(--q-radius-pill);
  background-color: var(--q-green-deep);
  border: 4px solid #FFFFFF;
  box-shadow: var(--q-shadow-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--q-sp-4);
}
.q-provider-avatar-img {
  width: 72px;
  height: 72px;
}
.q-provider-title-sub {
  font-size: var(--q-text-sm);
  font-weight: 600;
  color: var(--q-green-emerald);
}
.q-provider-license-badge {
  display: inline-block;
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
  margin-top: var(--q-sp-2);
}

.q-provider-info {
  padding: var(--q-sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .q-provider-info {
    padding: var(--q-sp-12);
  }
}
.q-provider-quote {
  font-family: var(--q-font-italic);
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--q-green-deep);
  margin-bottom: var(--q-sp-6);
  position: relative;
  padding-left: var(--q-sp-4);
  border-left: 2px solid var(--q-gold);
}

/* --- Section 10: Patient Journey --- */
.q-journey-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-6);
  position: relative;
}
@media (min-width: 768px) {
  .q-journey-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .q-journey-timeline {
    grid-template-columns: repeat(4, 1fr);
  }
}

.q-step-card {
  background-color: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-lg);
  padding: var(--q-sp-6);
  position: relative;
}
.q-step-num {
  width: 36px;
  height: 36px;
  border-radius: var(--q-radius-pill);
  background-color: var(--q-bg-secondary);
  border: 1px solid var(--q-gold);
  color: var(--q-green-deep);
  font-family: var(--q-font-serif);
  font-weight: 700;
  font-size: var(--q-text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--q-sp-4);
}
.q-step-title {
  font-size: 1.15rem;
  margin-bottom: var(--q-sp-2);
}
.q-step-desc {
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
  line-height: 1.55;
  margin-bottom: 0;
}

/* --- Section 11: Pricing & New Patients --- */
.q-pricing-preview {
  background: linear-gradient(180deg, var(--q-bg-primary) 0%, var(--q-bg-secondary) 100%);
  border: 1px solid var(--q-border-card);
  border-radius: var(--q-radius-xl);
  padding: var(--q-sp-8);
}
@media (min-width: 768px) {
  .q-pricing-preview {
    padding: var(--q-sp-12);
  }
}
.q-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-6);
  margin-top: var(--q-sp-8);
}
@media (min-width: 768px) {
  .q-pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.q-price-card {
  background-color: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-md);
  padding: var(--q-sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.q-price-card.featured {
  border-color: var(--q-gold);
  box-shadow: var(--q-shadow-card);
}
.q-price-label {
  font-size: var(--q-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--q-gold-text);
  margin-bottom: var(--q-sp-2);
}
.q-price-title {
  font-size: 1.25rem;
  margin-bottom: var(--q-sp-4);
}
.q-price-tag {
  font-family: var(--q-font-serif);
  font-size: var(--q-text-2xl);
  color: var(--q-green-deep);
  font-weight: 600;
  margin-bottom: var(--q-sp-4);
}
.q-price-desc {
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
  line-height: 1.5;
  margin-bottom: var(--q-sp-4);
}

/* --- Section 12: Location & Map --- */
.q-location-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-8);
}
@media (min-width: 1024px) {
  .q-location-split {
    grid-template-columns: 1fr 1fr;
  }
}

.q-location-info-card {
  background: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-lg);
  padding: var(--q-sp-8);
}
.q-loc-detail-group {
  margin-bottom: var(--q-sp-6);
}
.q-loc-label {
  font-size: var(--q-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--q-gold-text);
  margin-bottom: var(--q-sp-1);
}
.q-loc-val {
  font-size: var(--q-text-base);
  color: var(--q-text-main);
  font-weight: 500;
}
/* Botones bajo el mapa (Google y Apple), 24 sep 2026 */
.q-map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}
.q-map-links .q-btn {
  flex: 1 1 220px;
  max-width: 320px;
  justify-content: center;
}

.q-map-container {
  min-height: 340px;
  background-color: var(--q-bg-secondary);
  border-radius: var(--q-radius-lg);
  overflow: hidden;
  border: 1px solid var(--q-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Section 13: Final CTA Banner (Biograph-Level Atmospheric Presence) --- */
.q-cta-section {
  background: radial-gradient(circle at 50% 30%, #1E4631 0%, #12281D 70%, #0D1E16 100%);
  color: var(--q-text-inverse);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(196, 164, 94, 0.2);
}
@media (min-width: 1024px) {
  .q-cta-section {
    padding: 120px 0;
  }
}
.q-cta-section h2 {
  font-family: var(--q-font-serif);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #FFFFFF;
  margin-bottom: var(--q-sp-5);
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.q-cta-section p {
  color: #DCE5DC;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.65;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--q-sp-8);
  position: relative;
  z-index: 2;
}
.q-cta-btn-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--q-sp-4);
  position: relative;
  z-index: 2;
}
@media (min-width: 480px) {
  .q-cta-btn-group {
    flex-direction: row;
  }
}

/* --- Section 14: Comprehensive Footer --- */
.q-footer {
  background-color: #0E1D14;
  color: #DCE5DC;
  padding-top: var(--q-sp-16);
  padding-bottom: var(--q-sp-24);
  font-size: var(--q-text-sm);
  border-top: 1px solid rgba(196, 164, 94, 0.25);
}
@media (min-width: 1024px) {
  .q-footer {
    padding-bottom: var(--q-sp-16);
  }
}

.q-footer p {
  color: #DCE5DC;
}

.q-footer strong {
  color: #FFFFFF;
}

.q-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-10);
  margin-bottom: var(--q-sp-12);
}
@media (min-width: 640px) {
  .q-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .q-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }
}

.q-footer-logo {
  height: 60px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: var(--q-sp-4);
}
.q-footer-tagline {
  color: #DCE5DC !important;
  font-size: var(--q-text-xs);
  line-height: 1.6;
  margin-bottom: var(--q-sp-4);
}
.q-footer-heading {
  font-family: var(--q-font-sans);
  font-size: var(--q-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--q-gold-light);
  margin-bottom: var(--q-sp-4);
}
.q-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--q-sp-2);
}
.q-footer-link {
  color: #DCE5DC;
  text-decoration: none;
  font-size: var(--q-text-xs);
  transition: color var(--q-duration-fast) var(--q-ease-smooth);
}
.q-footer-link:hover {
  color: #FFFFFF;
}

.q-footer-bottom {
  border-top: 1px solid rgba(250, 250, 247, 0.15);
  padding-top: var(--q-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--q-sp-4);
  font-size: var(--q-text-xs);
  color: #CAD5CA;
}
@media (min-width: 768px) {
  .q-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.q-footer-bottom p {
  color: #CAD5CA;
  margin-bottom: 0;
}

.q-legal-disclosure {
  font-size: 0.75rem;
  color: #CAD5CA !important;
  line-height: 1.55;
  max-width: 720px;
}
.q-license-badge {
  color: var(--q-gold-light);
  font-weight: 600;
}

.q-footer-legal-bar {
  border-top: 1px solid rgba(217, 190, 134, 0.35);
  margin-top: var(--q-sp-6);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.88rem;
  color: #FFFFFF;
}

.q-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.q-footer-legal-links span[aria-hidden="true"] {
  display: none !important;
}

.q-footer-legal-links a,
.q-legal-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(217, 190, 134, 0.18) !important;
  border: 1.5px solid #D9BE86 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.q-footer-legal-links a:hover,
.q-legal-pill:hover {
  background: #D9BE86 !important;
  color: #0F1E16 !important;
  border-color: #D9BE86 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(217, 190, 134, 0.45) !important;
}

.q-legal-disclosure {
  color: #E2ECE2 !important;
  line-height: 1.6;
}

.q-license-badge {
  color: #D9BE86 !important;
  font-weight: 600;
}

/* --- Mobile Floating Bottom Bar --- */
.q-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--q-border-subtle);
  padding: var(--q-sp-3) var(--q-sp-4);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--q-sp-3);
  z-index: 998;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .q-mobile-bar {
    display: none;
  }
}
.q-mobile-bar-btn {
  height: 44px;
  font-size: var(--q-text-xs);
  padding: 0 var(--q-sp-3);
}

/* ============================================================
   BIOGRAPH-LEVEL ELEVATION: COMPARISON, BIOMARKERS & CREDENTIALS
   ============================================================ */

/* --- Editorial Comparison Section (Dark Biotech Ambience) --- */
.q-comparison-section {
  position: relative;
  background-color: #0B1710;
  color: #FFFFFF;
  padding: clamp(80px, 8vw, 120px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(196, 164, 94, 0.2);
  border-bottom: 1px solid rgba(196, 164, 94, 0.2);
}

.q-comparison-section .q-container {
  position: relative;
  z-index: 10;
  width: 100%;
}

.q-dna-ambient-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.q-dna-ambient-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  opacity: 0.20;
  filter: contrast(1.15) brightness(0.95);
  mix-blend-mode: screen;
}

.q-dna-ambient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(11, 23, 16, 0.72) 0%, rgba(11, 23, 16, 0.92) 60%, #08120C 100%);
  z-index: 2;
}

.q-comparison-section .q-eyebrow {
  color: #F3E5AB !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 14px !important;
  display: inline-block !important;
  background: rgba(0, 0, 0, 0.45);
  padding: 5px 16px;
  border-radius: 30px;
  border: 1px solid rgba(243, 229, 171, 0.35);
}

.q-comparison-section .q-section-header h2 {
  color: #FFFFFF !important;
  font-family: var(--q-font-serif) !important;
  font-size: clamp(2.2rem, 4.2vw, 3.3rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 16px !important;
}

.q-comparison-section .q-divider-arc {
  background: linear-gradient(90deg, transparent, #C4A45E, transparent) !important;
  height: 2px !important;
  width: 140px !important;
  margin: 0 auto 18px auto !important;
  opacity: 0.9 !important;
}

.q-comparison-section .q-section-header .q-lead {
  color: #F5FAF5 !important;
  font-size: 1.18rem !important;
  line-height: 1.65 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95) !important;
  font-weight: 400 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* --- Editorial Comparison Grid (Reactive vs Proactive) --- */
.q-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-6);
  margin-top: var(--q-sp-8);
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 10;
}
@media (min-width: 840px) {
  .q-compare-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--q-sp-8);
    align-items: stretch;
  }
}

.q-compare-card {
  border-radius: var(--q-radius-xl);
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--q-duration-normal) var(--q-ease-smooth);
}

/* Card A: Traditional Medicine (Dark Frosted Glass) */
.q-compare-card-trad {
  background: rgba(14, 25, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.q-compare-card-trad .q-compare-badge {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #B5C4B9;
  margin-bottom: var(--q-sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 6px;
  width: fit-content;
}
.q-compare-card-trad h3 {
  font-family: var(--q-font-serif);
  font-size: 1.7rem;
  color: #FFFFFF !important;
  font-weight: 700;
  margin-bottom: var(--q-sp-6);
}

/* Card B: Quintana Model (Evergreen Luxury / Gold Glowing Accent) */
.q-compare-card-quintana {
  background: linear-gradient(155deg, rgba(20, 52, 35, 0.95) 0%, rgba(12, 30, 20, 0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(226, 201, 138, 0.75);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}
.q-compare-card-quintana .q-compare-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(196, 164, 94, 0.28);
  border: 1px solid rgba(243, 229, 171, 0.7);
  padding: 6px 16px;
  border-radius: var(--q-radius-pill);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #FFDE7D;
  margin-bottom: var(--q-sp-3);
  width: fit-content;
}
.q-compare-card-quintana h3 {
  font-family: var(--q-font-serif);
  font-size: 1.8rem;
  color: #FFFFFF !important;
  font-weight: 700;
  margin-bottom: var(--q-sp-6);
}

.q-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--q-sp-5);
  flex-grow: 1;
}

.q-compare-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1rem;
  line-height: 1.55;
  color: #FFFFFF !important;
}
.q-compare-item span {
  color: #FFFFFF !important;
}
.q-compare-item strong {
  color: #FFFFFF !important;
  font-weight: 700;
}
.q-compare-icon-neg {
  color: #FF8F73;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: bold;
}
.q-compare-icon-pos {
  color: #FFDE7D;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: bold;
  filter: drop-shadow(0 2px 8px rgba(255, 222, 125, 0.6));
}

/* --- Biomarker Systems Grid --- */
.q-biomarker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-5);
  margin-top: var(--q-sp-8);
}
@media (min-width: 640px) {
  .q-biomarker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .q-biomarker-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.q-biomarker-card {
  background: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-lg);
  padding: var(--q-sp-6);
  display: flex;
  flex-direction: column;
  transition: all var(--q-duration-normal) var(--q-ease-smooth);
}
.q-biomarker-card:hover {
  transform: translateY(-3px);
  border-color: var(--q-gold);
  box-shadow: var(--q-shadow-hover);
}

.q-biomarker-num {
  font-family: var(--q-font-serif);
  font-size: 1.25rem;
  color: var(--q-gold-text);
  font-weight: 700;
  margin-bottom: var(--q-sp-2);
}
.q-biomarker-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--q-green-deep);
  margin-bottom: var(--q-sp-3);
}
.q-biomarker-desc {
  font-size: var(--q-text-xs);
  color: var(--q-text-muted);
  line-height: 1.6;
  margin-bottom: var(--q-sp-4);
  flex-grow: 1;
}
.q-biomarker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.q-biomarker-tag {
  background: var(--q-bg-secondary);
  color: var(--q-green-deep);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}

/* ============================================================
   CLINICAL AESTHETICS SECTION (Quiet Luxury & Medical Precision)
   ============================================================ */
.q-aesthetics-section {
  background-color: #F8F9F6;
  position: relative;
  overflow: hidden;
}

.q-aesthetics-video-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.q-aesthetics-video-backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.20;
  filter: saturate(0.85) contrast(1.08);
}

.q-aesthetics-backdrop-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 35%,
    rgba(248, 249, 246, 0.60) 0%,
    rgba(248, 249, 246, 0.86) 65%,
    rgba(248, 249, 246, 0.97) 100%
  );
  pointer-events: none;
}

.q-aesthetics-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-8);
  align-items: center;
  margin-bottom: var(--q-sp-10);
}
@media (min-width: 992px) {
  .q-aesthetics-intro-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(36px, 4.5vw, 60px);
  }
}

.q-aesthetics-clinician-card {
  background: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-xl);
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: 0 16px 40px rgba(25, 61, 42, 0.06);
  position: relative;
}

.q-aesthetics-clinician-header {
  display: flex;
  align-items: center;
  gap: var(--q-sp-5);
  margin-bottom: var(--q-sp-5);
}
.q-aesthetics-clinician-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--q-gold-light);
  box-shadow: 0 8px 24px rgba(25, 61, 42, 0.12);
  flex-shrink: 0;
}
.q-aesthetics-clinician-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Service Cards Grid */
.q-aesthetics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-6);
}
@media (min-width: 768px) {
  .q-aesthetics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--q-sp-6);
  }
}

.q-aesthetics-card {
  background: #FFFFFF;
  border-radius: var(--q-radius-lg);
  border: 1px solid var(--q-border-subtle);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--q-shadow-sm);
  transition: transform var(--q-duration-normal) var(--q-ease-smooth), box-shadow var(--q-duration-normal) var(--q-ease-smooth);
}
.q-aesthetics-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(25, 61, 42, 0.12);
  border-color: rgba(196, 164, 94, 0.45);
}
.q-aesthetics-card-img {
  height: 220px;
  overflow: hidden;
  position: relative;
}
.q-aesthetics-card-img img,
.q-aesthetics-card-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--q-ease-smooth);
}
.q-aesthetics-card:hover .q-aesthetics-card-img img,
.q-aesthetics-card:hover .q-aesthetics-card-img video {
  transform: scale(1.05);
}
.q-card-video-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(14, 38, 25, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 164, 94, 0.4);
  border-radius: 100px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.q-aesthetics-card-body {
  padding: clamp(20px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.q-aesthetics-card-tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--q-gold-text);
  margin-bottom: var(--q-sp-2);
}
.q-aesthetics-card-title {
  font-family: var(--q-font-serif);
  font-size: 1.3rem;
  color: var(--q-green-deep);
  margin-bottom: var(--q-sp-3);
  line-height: 1.3;
}
.q-aesthetics-card-desc {
  font-size: 0.88rem;
  color: var(--q-text-muted);
  line-height: 1.55;
  margin-bottom: var(--q-sp-4);
  flex-grow: 1;
}
.q-aesthetics-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--q-sp-5) 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-aesthetics-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--q-text-secondary);
}
.q-aesthetics-check-icon {
  color: var(--q-green-emerald);
  flex-shrink: 0;
  font-weight: bold;
}

/* ============================================================
   WHATSAPP BUSINESS FLOATING CTA & BIOMETRIC CARD
   ============================================================ */
.q-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 990;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  text-decoration: none;
}
.q-whatsapp-float:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55);
  color: #FFFFFF;
}
@media (max-width: 767px) {
  .q-whatsapp-float {
    bottom: 74px; /* Above the mobile action bar */
    right: 18px;
    width: 50px;
    height: 50px;
  }
}

/* Floating Biometric Telemetry Card (MyDNA-inspired) */
.q-biometric-telemetry-card {
  position: absolute;
  bottom: 28px;
  right: 32px;
  background: rgba(14, 28, 20, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(196, 164, 94, 0.4);
  border-radius: var(--q-radius-lg);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  max-width: 290px;
  pointer-events: auto;
}
@media (max-width: 900px) {
  .q-biometric-telemetry-card {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 24px;
    max-width: 100%;
  }
}
.q-bio-telemetry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 8px;
}
.q-bio-telemetry-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--q-gold-light);
}
.q-bio-pulse-dot {
  width: 8px;
  height: 8px;
  background: #22C55E;
  border-radius: 50%;
  box-shadow: 0 0 10px #22C55E;
  animation: q-pulse-dot 2s infinite ease-in-out;
}
@keyframes q-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.q-bio-ecg-line {
  width: 100%;
  height: 28px;
  stroke: #22C55E;
  stroke-width: 2;
  fill: none;
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}
.q-bio-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.q-bio-metric-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px 10px;
}
.q-bio-metric-lbl {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.q-bio-metric-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  font-family: var(--q-font-sans);
}
.q-bio-metric-unit {
  font-size: 0.72rem;
  color: var(--q-gold-light);
  font-weight: 400;
  margin-left: 2px;
}

/* ============================================================
   FAQ ACCORDION COMPONENT (Accessible & Minimalist Quiet Luxury)
   ============================================================ */
.q-faq-section {
  background-color: var(--q-bg-primary);
  position: relative;
}
.q-faq-container {
  max-width: 860px;
  margin: 0 auto;
}
.q-faq-item {
  border-bottom: 1px solid var(--q-border-subtle);
  transition: background-color var(--q-duration-fast) var(--q-ease-smooth);
}
.q-faq-item:first-child {
  border-top: 1px solid var(--q-border-subtle);
}
.q-faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--q-font-serif);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  color: var(--q-green-deep);
  transition: color var(--q-duration-fast) var(--q-ease-smooth);
}
.q-faq-trigger:hover {
  color: var(--q-green-emerald);
}
.q-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--q-border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--q-font-sans);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--q-green-deep);
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.q-faq-item.is-open .q-faq-icon {
  transform: rotate(45deg);
  background-color: var(--q-green-deep);
  border-color: var(--q-green-deep);
  color: #FFFFFF;
}
.q-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 0.35s ease;
}
.q-faq-item.is-open .q-faq-content {
  max-height: 320px;
  padding-bottom: 22px;
}
.q-faq-answer {
  font-size: 0.95rem;
  color: var(--q-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   CLINICAL SUITE 310 GALLERY (Doral Sanctuary)
   Sin uso en las páginas publicadas desde el 9 oct 2026 (galería retirada;
   ver 09-ARCHIVO/web-fotos-clinica-2026-10-09/).
   Se conserva para volver a ponerla y porque la usa preview-qms-theme.html.
   ============================================================ */
.q-clinic-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--q-sp-6);
  margin-top: var(--q-sp-10);
}
@media (min-width: 768px) {
  .q-clinic-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.q-clinic-gallery-item {
  border-radius: var(--q-radius-lg);
  overflow: hidden;
  background-color: var(--q-bg-surface);
  border: 1px solid var(--q-border-subtle);
  box-shadow: var(--q-shadow-sm);
  transition: transform var(--q-duration-normal) var(--q-ease-smooth), box-shadow var(--q-duration-normal) var(--q-ease-smooth);
}
.q-clinic-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--q-shadow-hover);
}
.q-clinic-gallery-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.6s var(--q-ease-smooth);
}
.q-clinic-gallery-item:hover .q-clinic-gallery-img {
  transform: scale(1.04);
}
.q-clinic-gallery-caption {
  padding: 14px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--q-green-deep);
  border-top: 1px solid var(--q-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.q-clinic-gallery-caption span {
  color: var(--q-gold-text);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   CATEGORY FILTER PILLS (Contact Form Quick Selector)
   ============================================================ */
.q-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.q-cat-pill {
  border: 1px solid var(--q-border-card);
  background: #FFFFFF;
  color: var(--q-green-deep);
  padding: 8px 14px;
  border-radius: var(--q-radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--q-duration-fast) var(--q-ease-smooth);
  font-family: var(--q-font-sans);
}
.q-cat-pill:hover {
  border-color: var(--q-green-emerald);
  background: var(--q-mint-subtle);
}
.q-cat-pill.is-selected {
  background: var(--q-green-deep);
  color: #FFFFFF;
  border-color: var(--q-green-deep);
  box-shadow: 0 2px 8px rgba(25, 61, 42, 0.2);
}
.q-consultation-estimate-badge {
  background: rgba(196, 164, 94, 0.12);
  border: 1px solid rgba(196, 164, 94, 0.35);
  border-radius: var(--q-radius-md);
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--q-gold-text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   AESTHETICS INTERACTIVE BEFORE / AFTER SHOWCASE (Quiet Luxury)
   ============================================================ */
.q-comparison-showcase {
  margin: var(--q-sp-8) 0 var(--q-sp-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 992px) {
  .q-comparison-showcase {
    grid-template-columns: 1fr 1.08fr;
  }
}

.q-comparison-copy {
  display: flex;
  flex-direction: column;
}

.q-comparison-title {
  font-family: var(--q-font-serif);
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  color: var(--q-green-deep);
  line-height: 1.18;
  margin-bottom: var(--q-sp-4);
}

.q-comparison-lead {
  font-size: 1rem;
  color: var(--q-text-secondary);
  line-height: 1.68;
  margin-bottom: var(--q-sp-5);
}

.q-comparison-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--q-sp-3) 0 var(--q-sp-4);
}

.q-comparison-pill {
  border: 1px solid var(--q-border-subtle);
  background: rgba(255, 255, 255, 0.85);
  color: var(--q-green-deep);
  padding: 8px 16px;
  border-radius: var(--q-radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--q-duration-fast) var(--q-ease-smooth);
  font-family: var(--q-font-sans);
  letter-spacing: 0.02em;
}

.q-comparison-pill:hover {
  border-color: var(--q-gold);
  background: #FFFFFF;
}

.q-comparison-pill.is-active {
  background: var(--q-green-deep);
  color: #FFFFFF;
  border-color: var(--q-green-deep);
  box-shadow: 0 4px 14px rgba(25, 61, 42, 0.2);
}

.q-comparison-active-desc {
  font-size: 0.88rem;
  color: var(--q-text-muted);
  line-height: 1.55;
  margin-bottom: var(--q-sp-5);
  min-height: 42px;
  transition: opacity 0.25s ease;
}

.q-comparison-disclaimer {
  font-size: 0.74rem;
  color: var(--q-text-muted);
  line-height: 1.45;
  margin-top: var(--q-sp-4);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(25, 61, 42, 0.03);
  border-left: 2px solid var(--q-gold);
  border-radius: 0 var(--q-radius-sm) var(--q-radius-sm) 0;
}

/* Right Side: Portrait Frame & Rings */
.q-comparison-frame-wrap {
  position: relative;
  width: 100%;
  max-width: 490px;
  margin: 0 auto;
}

.q-comparison-growth-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.q-comparison-container {
  --slider-pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--q-radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 28px 70px rgba(14, 38, 25, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
  background: #C4B5A5;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  z-index: 1;
  transition: transform 0.4s var(--q-ease-smooth), box-shadow 0.4s var(--q-ease-smooth);
}

.q-comparison-container:hover {
  transform: scale(1.008);
  box-shadow: 0 32px 75px rgba(14, 38, 25, 0.25);
}

.q-comparison-img-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.q-comparison-img-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.q-comparison-img-after {
  z-index: 1;
}

.q-comparison-img-before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--slider-pos)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--slider-pos)) 0 0);
}

/* Reference-Style In-Frame Editorial Text Overlays */
.q-overlay-left {
  position: absolute;
  top: clamp(22px, 4vw, 36px);
  left: clamp(18px, 3.5vw, 30px);
  max-width: 68%;
  z-index: 3;
  pointer-events: none;
}

.q-overlay-brand {
  font-family: var(--q-font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.q-overlay-brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--q-gold);
  display: inline-block;
  box-shadow: 0 0 6px rgba(196, 164, 94, 0.8);
}

.q-overlay-title-before {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  margin: 0;
}

.q-overlay-right {
  position: absolute;
  top: clamp(22px, 4vw, 36px);
  right: clamp(18px, 3.5vw, 30px);
  text-align: right;
  max-width: 68%;
  z-index: 3;
  pointer-events: none;
}

.q-overlay-title-after {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  margin: 0;
}

/* Iconic Lifting Vector Curved Arrow along jawline/cheek */
.q-overlay-lifting-arrow {
  position: absolute;
  bottom: 24%;
  right: 14%;
  width: 72px;
  height: 95px;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  animation: q-arrow-float 3.2s ease-in-out infinite;
}

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

.q-comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--slider-pos);
  width: 2.5px;
  background: #FFFFFF;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.65), 0 0 4px rgba(255, 255, 255, 0.8);
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
}

.q-comparison-handle {
  position: absolute;
  top: 50%;
  left: var(--slider-pos);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(25, 61, 42, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%) scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  cursor: ew-resize;
  pointer-events: auto;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.q-comparison-handle:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(25, 61, 42, 0.5);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
}

.q-comparison-handle.is-dragging {
  transform: translate(-50%, -50%) scale(1.18);
  background: rgba(25, 61, 42, 0.65);
}

.q-comparison-handle-icon {
  width: 24px;
  height: 24px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Auto-Play Toggle & Status Badge */
.q-comparison-autoplay-btn {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14, 38, 25, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 164, 94, 0.45);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  z-index: 7;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: var(--q-font-sans);
}

.q-comparison-autoplay-btn:hover {
  background: var(--q-green-deep);
  border-color: var(--q-gold);
}

.q-comparison-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  margin: 0;
  padding: 0;
}




/* ============================================================
   «Cómo llegar»: selector de apps de mapas (iPhone, iPad y Mac), 14 oct 2026.
   Lo crea main.js (initMapaSegunDispositivo) al final de <body>.
   Pantallas mayores: menú junto al botón. Teléfono (≤ 700 px): hoja inferior
   modal con «Cancelar». Superficie blanca, tinta verde y oro solo en el rótulo
   y las flechas.
   ============================================================ */
.q-mapas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1002;
  width: max-content;
  min-width: 268px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: var(--q-mapas-origen, top left);
  transition: opacity 0.2s ease, transform 0.26s var(--q-ease-smooth);
  pointer-events: none;
}
.q-mapas.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.q-mapas[hidden],
.q-mapas-fondo[hidden] {
  display: none;
}
.q-mapas-panel {
  padding: 6px;
  background: var(--q-bg-surface);
  border: 1px solid var(--q-border-card);
  border-radius: 14px;
  box-shadow: 0 24px 56px -22px rgba(25, 61, 42, 0.34), 0 4px 14px rgba(25, 61, 42, 0.06);
}
.q-mapas-cab {
  padding: 10px 12px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--q-border-subtle);
}
.q-mapas-titulo {
  margin: 0;
  font-family: var(--q-font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--q-gold-text);
}
.q-mapas-dir {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--q-text-muted);
}
.q-mapas-lista {
  display: grid;
  gap: 2px;
}
.q-mapas-op {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--q-radius-md);
  font-family: var(--q-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--q-green-deep);
  text-decoration: none;
  transition: background-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
/* La flecha es decorativa: va en un span con aria-hidden y no entra en el nombre accesible. */
.q-mapas-flecha {
  color: var(--q-gold-text);
  transition: transform 0.25s var(--q-ease-smooth);
}
.q-mapas-op:hover,
.q-mapas-op:focus-visible {
  background: var(--q-mint-subtle);
  color: var(--q-green-deep);
}
.q-mapas-op:hover .q-mapas-flecha,
.q-mapas-op:focus-visible .q-mapas-flecha {
  transform: translateX(3px);
}
.q-mapas-op:focus {
  outline: none;
}
.q-mapas-op:focus-visible {
  outline: 2px solid var(--q-focus-ring);
  outline-offset: -2px;
}
.q-mapas-cancelar {
  display: none;
}
/* Enlace «Cómo llegar» de la tarjeta de dirección (/contact): zona táctil de 44 px.
   El relleno vertical de un enlace en línea no cambia la altura de la línea: el diseño no se mueve. */
.q-mapas-enlace {
  padding-block: 14px;
}
.q-mapas-fondo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(16, 38, 26, 0.4);
  opacity: 0;
  transition: opacity 0.26s ease;
  pointer-events: none; /* mientras se desvanece al cerrar, no frena toques ni arrastres */
}
.q-mapas-fondo.is-open {
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
}

/* Teléfono: hoja inferior */
.q-mapas.is-sheet {
  position: fixed;
  left: 12px !important;
  right: 12px;
  top: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1101;
  width: auto;
  min-width: 0;
  max-width: 520px;
  margin: 0 auto;
  transform: translateY(calc(100% + 24px));
  transition: opacity 0.2s ease, transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
  touch-action: none;
}
.q-mapas.is-sheet.is-open {
  transform: none;
}
.q-mapas.is-sheet .q-mapas-panel {
  padding: 6px 6px 8px;
  border-radius: 20px;
  box-shadow: 0 18px 48px -18px rgba(16, 38, 26, 0.45);
}
.q-mapas.is-sheet .q-mapas-cab {
  padding: 14px 16px 12px;
  text-align: center;
}
.q-mapas.is-sheet .q-mapas-op {
  min-height: 54px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 1.0625rem;
}
.q-mapas.is-sheet .q-mapas-cancelar {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--q-border-card);
  border-radius: 20px;
  background: var(--q-bg-surface);
  box-shadow: 0 18px 48px -18px rgba(16, 38, 26, 0.45);
  font-family: var(--q-font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--q-green-emerald);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.q-mapas.is-sheet .q-mapas-cancelar:hover {
  background: var(--q-bg-secondary);
}
.q-mapas.is-sheet .q-mapas-cancelar:focus {
  outline: none;
}
.q-mapas.is-sheet .q-mapas-cancelar:focus-visible {
  outline: 2px solid var(--q-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .q-mapas,
  .q-mapas.is-sheet,
  .q-mapas-fondo,
  .q-mapas-flecha {
    transition: none;
  }
  .q-mapas,
  .q-mapas.is-sheet {
    transform: none;
  }
}

/* Correo con selector (CORREO-SELECTOR, 26 oct 2026): el mismo selector para los enlaces de correo
   (initCorreoConSelector en main.js). «Copiar dirección» es un <button> y se iguala a las opciones
   enlace; la dirección de la cabecera se puede seleccionar entera y parte si no cabe. */
button.q-mapas-op {
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.q-correo-dir {
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

/* «Cambiar app de mapas» (decisión 6 del dueño, 16 oct 2026): enlace pequeño bajo «Cómo llegar».
   Oculto en el HTML; main.js lo muestra en iPhone, iPad y Mac cuando ya hay una app guardada y el
   botón abre directo. Es un <button> con aspecto de enlace (sin JS no tiene destino). Zona táctil
   de 44 px. */
.q-mapas-cambiar {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 2px 0 0;
  padding: 12px 8px;
  border: 0;
  border-radius: var(--q-radius-md);
  background: none;
  font-family: var(--q-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--q-text-muted);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.q-mapas-cambiar[hidden] {
  display: none;
}
.q-mapas-cambiar:hover,
.q-mapas-cambiar:focus-visible {
  color: var(--q-green-deep);
}
.q-mapas-cambiar:focus {
  outline: none;
}
.q-mapas-cambiar:focus-visible {
  outline: 2px solid var(--q-focus-ring);
  outline-offset: 2px;
}
/* En la tarjeta de dirección de /contact va a la izquierda, bajo el enlace «Cómo llegar». */
.q-info-block .q-mapas-cambiar {
  width: auto;
  padding-inline: 0;
  text-align: left;
}
/* Bajo el botón del mapa de /contact (fila flexible): en su propia línea. */
.q-map-links .q-mapas-cambiar {
  flex: 1 1 100%;
  margin: 0;
}

/* ---- css/motion.css ---- */
/* ============================================================
   QUINTANA MEDICAL SERVICES — Motion & Microinteractions
   Biograph-Level Polish · Organic Biological Motion · Calm Luxury
   ============================================================ */

:root {
  /* Motion Duration Tokens */
  --q-motion-fast:      220ms;
  --q-motion-normal:    420ms;
  --q-motion-editorial: 750ms;
  --q-motion-slow:      1400ms;

  /* Editorial Premium Easings */
  --q-ease-editorial:   cubic-bezier(0.22, 1, 0.36, 1);
  --q-ease-gentle:      cubic-bezier(0.16, 1, 0.3, 1);
  --q-ease-subtle:      cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================================
   1. GLOBAL BODY & BACKGROUND PALETTE TRANSITIONS
   ============================================================ */
body {
  transition: background-color 750ms var(--q-ease-editorial);
}

body[data-theme="warm-white"] {
  background-color: var(--q-bg-primary);
}

body[data-theme="ivory"] {
  background-color: var(--q-bg-secondary);
}

body[data-theme="white"] {
  background-color: #FFFFFF;
}

body[data-theme="sage"] {
  background-color: #EDF3ED;
}

body[data-theme="deep-green"] {
  background-color: #0E1E15;
}

/* ============================================================
   2. ORGANIC CIRCULAR MOTION & DISABLED RINGS
   ============================================================ */
/* Ring Graphic Container - Explicitly removed per user request */
.q-growth-ring-system,
.q-longevity-ring-graphic {
  display: none !important;
}

/* ============================================================
   3. HIERARCHICAL SCROLL REVEALS (Intersection Observer)
   ============================================================ */
/* Base Reveal Container */
.q-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: 
    opacity var(--q-motion-editorial) var(--q-ease-editorial),
    transform var(--q-motion-editorial) var(--q-ease-editorial);
  will-change: opacity, transform;
}

.q-reveal-fade {
  opacity: 0;
  transition: opacity var(--q-motion-editorial) var(--q-ease-editorial);
  will-change: opacity;
}

.q-reveal-scale {
  opacity: 0;
  transform: scale(0.97) translateY(16px);
  transition: 
    opacity 800ms var(--q-ease-editorial),
    transform 800ms var(--q-ease-editorial);
  will-change: opacity, transform;
}

/* Hierarchy: Eyebrows reveal 1st */
.q-reveal-eyebrow {
  opacity: 0;
  transform: translateY(12px);
  transition: 
    opacity 550ms var(--q-ease-editorial),
    transform 550ms var(--q-ease-editorial);
  will-change: opacity, transform;
}

/* Hierarchy: Section Headings reveal 2nd */
.q-reveal-title {
  opacity: 0;
  transform: translateY(20px);
  transition: 
    opacity 750ms var(--q-ease-editorial),
    transform 750ms var(--q-ease-editorial);
  will-change: opacity, transform;
  transition-delay: 80ms;
}

/* Hierarchy: Body Copy reveals 3rd */
.q-reveal-body {
  opacity: 0;
  transform: translateY(14px);
  transition: 
    opacity 700ms var(--q-ease-editorial),
    transform 700ms var(--q-ease-editorial);
  will-change: opacity, transform;
  transition-delay: 160ms;
}

/* Hierarchy: CTAs reveal 4th with Icon Lag */
.q-reveal-cta {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: 
    opacity 650ms var(--q-ease-editorial),
    transform 650ms var(--q-ease-editorial);
  will-change: opacity, transform;
  transition-delay: 240ms;
}

.q-reveal-cta .q-btn-arrow {
  display: inline-block;
  opacity: 0.6;
  transform: translateX(-3px);
  transition: 
    transform 400ms var(--q-ease-editorial) 120ms,
    opacity 400ms var(--q-ease-editorial) 120ms;
}

.q-reveal-cta.is-revealed .q-btn-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Hierarchy: Editorial Images with Mask & Blur-to-Sharp Reveal */
.q-reveal-img {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(4px) saturate(0.92);
  transition: 
    opacity 850ms var(--q-ease-editorial),
    transform 950ms var(--q-ease-editorial),
    filter 850ms var(--q-ease-editorial);
  will-change: opacity, transform, filter;
}

.q-reveal-img.is-revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px) saturate(0.98);
}

/* Triggered State for all reveals */
.q-reveal.is-revealed,
.q-reveal-fade.is-revealed,
.q-reveal-scale.is-revealed,
.q-reveal-eyebrow.is-revealed,
.q-reveal-title.is-revealed,
.q-reveal-body.is-revealed,
.q-reveal-cta.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   4. STAGGER DELAY SYSTEM (60ms - 120ms between items)
   ============================================================ */
.q-stagger-1, .q-delay-1 { transition-delay: 0ms; }
.q-stagger-2, .q-delay-2 { transition-delay: 80ms; }
.q-stagger-3, .q-delay-3 { transition-delay: 160ms; }
.q-stagger-4, .q-delay-4 { transition-delay: 240ms; }
.q-stagger-5, .q-delay-5 { transition-delay: 320ms; }
.q-stagger-6 { transition-delay: 400ms; }
.q-stagger-7 { transition-delay: 480ms; }
.q-stagger-8 { transition-delay: 560ms; }

/* ============================================================
   5. IMAGE FRAMES & EDITORIAL MASKS
   ============================================================ */
.q-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--q-radius-xl);
  background-color: var(--q-bg-secondary);
}

.q-mask-organic-hero {
  border-radius: 32px 96px 32px 32px;
  box-shadow: 0 12px 36px rgba(25, 61, 42, 0.09);
  border: 1px solid rgba(196, 164, 94, 0.25);
}

.q-mask-arch {
  border-radius: 120px 120px 24px 24px;
}

.q-mask-soft-corner {
  border-radius: 24px 64px 24px 64px;
}

.q-editorial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  filter: saturate(0.96) contrast(0.99) brightness(0.99);
  transition: 
    transform 750ms var(--q-ease-editorial),
    filter 650ms var(--q-ease-editorial);
  will-change: transform, filter;
  display: block;
}

.q-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg, 
    rgba(25, 61, 42, 0) 40%, 
    rgba(25, 61, 42, 0.35) 100%
  );
  opacity: 0.65;
  transition: opacity 600ms var(--q-ease-editorial);
  pointer-events: none;
}

.q-image-frame:hover .q-editorial-img {
  transform: scale(1.035);
  filter: saturate(1.06) contrast(1.02) brightness(1.01);
}

.q-image-frame:hover::after {
  opacity: 0.85;
}

/* ============================================================
   6. ELEVATED SERVICE & ECOSYSTEM CARDS (HOVER + SCROLL HARMONY)
   ============================================================ */
.q-eco-card {
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF;
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-lg);
  padding: 0;
  opacity: 0;
  transform: translateY(22px);
  transition: 
    opacity 750ms var(--q-ease-editorial),
    transform 750ms var(--q-ease-editorial),
    border-color 450ms var(--q-ease-editorial),
    box-shadow 450ms var(--q-ease-editorial);
  will-change: opacity, transform;
}

.q-eco-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.q-eco-card.is-revealed:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 164, 94, 0.4);
  box-shadow: 0 14px 32px rgba(25, 61, 42, 0.08);
}

.q-card-media-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
  background-color: var(--q-bg-secondary);
}

.q-card-media-wrap .q-editorial-img {
  height: 100%;
  transform: scale(1);
  transition: transform 700ms var(--q-ease-editorial), filter 500ms var(--q-ease-editorial);
}

.q-eco-card:hover .q-card-media-wrap .q-editorial-img {
  transform: scale(1.05);
  filter: saturate(1.08) brightness(1.02);
}

.q-card-body {
  padding: var(--q-sp-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.q-eco-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--q-green-emerald) 0%, var(--q-gold) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--q-ease-editorial);
}

.q-eco-card:hover::after {
  transform: scaleX(1);
}

.q-eco-card:hover .q-eco-title {
  color: var(--q-green-emerald);
  transition: color 300ms var(--q-ease-editorial);
}

/* ============================================================
   7. BUTTON SYSTEM & HERO-TO-HEADER CONTINUITY
   ============================================================ */
.q-btn {
  position: relative;
  overflow: hidden;
  transition: 
    background-color 350ms var(--q-ease-editorial),
    color 350ms var(--q-ease-editorial),
    border-color 350ms var(--q-ease-editorial),
    box-shadow 450ms var(--q-ease-editorial),
    transform 350ms var(--q-ease-editorial);
  will-change: transform;
}

.q-btn-arrow {
  display: inline-block;
  transition: transform 320ms var(--q-ease-editorial);
}

.q-btn:hover .q-btn-arrow {
  transform: translateX(4px);
}

/* Primary Button Gold Shine Line */
.q-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: left 600ms var(--q-ease-editorial);
  pointer-events: none;
}

.q-btn-primary:hover::before {
  left: 140%;
}

/* Secondary Button Inward Fill */
.q-btn-secondary {
  position: relative;
  z-index: 1;
}

.q-btn-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--q-green-deep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 350ms var(--q-ease-editorial);
  z-index: -1;
  border-radius: inherit;
}

.q-btn-secondary:hover {
  color: #FFFFFF;
  border-color: var(--q-green-deep);
}

.q-btn-secondary:hover::after {
  transform: scaleY(1);
}

/* Header CTA Visual Continuity Enhancement */
.q-header-cta {
  transition: 
    background-color 350ms var(--q-ease-editorial),
    color 350ms var(--q-ease-editorial),
    border-color 450ms var(--q-ease-editorial),
    box-shadow 450ms var(--q-ease-editorial),
    transform 350ms var(--q-ease-editorial);
}

.q-header-cta.is-highlighted {
  border-color: var(--q-gold) !important;
  box-shadow: 0 0 0 2px rgba(196, 164, 94, 0.35), 0 6px 18px rgba(25, 61, 42, 0.14) !important;
}

/* ============================================================
   8. ACTIVE SECTION NAVIGATION SPY INDICATOR
   ============================================================ */
.q-link-editorial {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--q-text-main);
  font-weight: 500;
  text-decoration: none;
  transition: color 300ms var(--q-ease-editorial);
}

.q-link-editorial::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--q-green-emerald), var(--q-gold));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms var(--q-ease-editorial);
}

.q-link-editorial:hover::after,
.q-nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.q-link-editorial:hover,
.q-nav-link.is-active {
  color: var(--q-green-emerald) !important;
  font-weight: 600;
}

/* ============================================================
   9. PATIENT JOURNEY PROGRESSIVE STEP ACTIVATION
   ============================================================ */
.q-step-card {
  position: relative;
  transition: 
    border-color 450ms var(--q-ease-editorial),
    box-shadow 450ms var(--q-ease-editorial),
    transform 450ms var(--q-ease-editorial);
}

.q-step-card .q-step-num {
  transition: color 350ms var(--q-ease-editorial), transform 350ms var(--q-ease-editorial);
}

.q-step-card.is-step-active {
  border-color: rgba(196, 164, 94, 0.5) !important;
  box-shadow: 0 10px 26px rgba(25, 61, 42, 0.08) !important;
  transform: translateY(-2px);
}

.q-step-card.is-step-active .q-step-num {
  color: var(--q-green-emerald) !important;
  transform: scale(1.05);
}

/* ============================================================
   10. FLOATING BADGES & SUBTLE DEPTH
   ============================================================ */
.q-hero-float-badge {
  transition: transform 450ms var(--q-ease-editorial), box-shadow 450ms var(--q-ease-editorial);
  will-change: transform;
}

.q-hero-float-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(25, 61, 42, 0.1);
}

.q-hero-visual {
  transition: transform 500ms var(--q-ease-editorial);
  will-change: transform;
}

/* Provider Spotlight Container */
.q-provider-photo-container {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border-radius: var(--q-radius-lg);
  box-shadow: var(--q-shadow-hover);
}

/* ============================================================
   11. ACCESSIBILITY OVERRIDES (prefers-reduced-motion: reduce)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none !important;
  }

  .q-reveal,
  .q-reveal-fade,
  .q-reveal-scale,
  .q-reveal-eyebrow,
  .q-reveal-title,
  .q-reveal-body,
  .q-reveal-cta,
  .q-reveal-img,
  .q-eco-card,
  .q-step-card,
  .q-pillar-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  .q-btn-arrow {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .q-editorial-img,
  .q-btn,
  .q-hero-float-badge,
  .q-hero-visual {
    transition: none !important;
    transform: none !important;
  }

  /* Se ocultan con scale(0): quitarles el transform los dejaria tapando el texto. */
  .q-btn-primary::before,
  .q-btn-secondary::after,
  .q-eco-card::after,
  .q-link-editorial::after {
    transition: none !important;
  }
}


/* ---- css/refinement.css ---- */
/* Quintana: editorial refinement of the existing design system. */
:root {
  --q-bg-primary: #fafbf7;
  --q-bg-secondary: #f2f3eb;
  --q-radius-lg: 12px;
  --q-radius-xl: 18px;
  --q-gold-text: #79602d;
}
html { scroll-padding-top: 112px; }
body { overflow-x: clip; }
main, section, .q-container, .q-container > *, [class$="-grid"] > * { min-width: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.q-container { max-width: 1360px; padding-inline: clamp(22px, 4.5vw, 72px); }
.q-section { padding-block: clamp(64px, 7.5vw, 112px); }
.q-section-header { max-width: 780px; margin-bottom: 48px; }
.q-section-header h2 { font-size: clamp(2.35rem, 4vw, 3.75rem); }
.q-eyebrow { font-size: .7rem; letter-spacing: .16em; margin-bottom: 18px; }
.q-eyebrow::after, .q-divider-arc { display: none; }
.q-eyebrow::before { width: 28px; }
.q-section-header .q-lead { font-size: 1rem; max-width: 580px; margin: 20px auto 0; }
/* Navigation retains the owner's symbol-only identity. */
.q-header-inner, .q-header.is-scrolled .q-header-inner { height: 88px; gap: 24px; }
.q-header { background: rgba(250,251,247,.95); }
.q-brand-link { margin: 0; }
.q-header-logo, .q-header.is-scrolled .q-header-logo { height: 52px; }
.q-header-actions { margin-left: auto; gap: 14px; flex-shrink: 0; }
.q-nav-list { gap: 20px; }
.q-nav-link { font-size: .8rem; padding-block: 15px; }
.q-phone-link { font-size: .94rem; padding: 0; border: 0; background: none; }
.q-lang-btn { min-width: 35px; min-height: 36px; }
.q-burger { width: 44px; height: 44px; }
.q-mobile-drawer { top: 88px; height: calc(100dvh - 88px); background: var(--q-bg-primary); visibility: hidden; }
.q-mobile-drawer.is-open { visibility: visible; }
.q-mobile-drawer[hidden] { display: none; }
.q-mobile-nav-link { padding-block: 10px; font-size: 1.9rem; border-bottom: 1px solid var(--q-border-subtle); }
/* Calm, tactile buttons. The label and arrow remain separate when translated. */
.q-btn { min-height: 50px; padding: 13px 23px; border-radius: 6px; letter-spacing: 0; white-space: normal; text-align: center; will-change: auto; }
.q-btn-lg { min-height: 56px; font-size: .875rem; padding: 16px 25px; }
.q-btn-arrow { margin-left: 10px; font-size: 1.15em; }
.q-btn-primary { background: var(--q-green-deep); }
.q-btn-primary::before { display: none; }
.q-btn-primary:hover { box-shadow: 0 6px 18px #193d2a18; }
.q-btn-secondary { border-color: #193d2a4d; }
.q-btn:focus-visible { outline: 3px solid var(--q-focus-ring); outline-offset: 4px; }
.q-welcome-cinema, .q-longevity-banner, .q-footer, .q-booking-card, .q-section-dark, .q-legal-page-hero, .q-compare-card-quintana, .qms-deep, .qms-card--dark { --q-focus-ring: #E8CE8C; }
.q-whatsapp-float:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 5px #193D2A; }
/* Hero: larger type, shorter message, intentional portrait and visible growth rings. */
.q-hero { background: var(--q-bg-primary); padding-block: 64px 78px; }
.q-hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(40px,6vw,88px); }
.q-badge-location { background: none; border: none; box-shadow: none; padding: 0; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 25px; }
.q-hero-title { font-size: clamp(3.3rem,5.8vw,5.5rem); line-height: .99; max-width: 11ch; margin-bottom: 28px; }
:lang(es) .q-hero-title { max-width: 13ch; }
.q-hero-lead { font-size: 1.025rem !important; line-height: 1.75; max-width: 40ch; margin-bottom: 28px; }
.q-hero-ctas { gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.q-hero-ctas .q-btn-secondary { border: none; background: transparent; padding-inline: 8px; }
.q-hero-ctas .q-btn-secondary::after { display: none; }
.q-hero-ctas .q-btn-secondary:hover { color: var(--q-green-deep); text-decoration: underline; text-underline-offset: 6px; }
.q-hero-guarantees { gap: 10px 20px; font-size: .73rem; max-width: 410px; }
.q-hero-visual { padding: 0; isolation: isolate; }
.q-hero-visual > .q-growth-ring-system { z-index: -1; width: 135% !important; height: 115% !important; top: 49% !important; opacity: .7; }
/* Foto de Onel en circulo con la tarjeta del nombre debajo (opcion A del dueño, 16 sep 2026). */
.q-mask-organic-hero { aspect-ratio: auto !important; border-radius: 0; border: none; box-shadow: none; overflow: visible; background: none; display: flex; flex-direction: column; align-items: center; }
.q-mask-organic-hero .q-editorial-img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; object-position: 50% 22%; filter: none; box-shadow: 0 0 0 1px rgba(217,190,134,.45), 0 0 0 9px rgba(217,190,134,.08); }
.q-mask-organic-hero::after { display: none; }
.q-hero-float-badge { position: relative; inset: auto; margin-top: -30px; max-width: calc(100% - 8px); background: #fff; border-radius: 18px; padding: 10px 18px 10px 10px; gap: 10px; z-index: 3; box-shadow: 0 12px 30px #193d2a0b; }
.q-hero-float-badge .q-float-badge-icon { width: 34px; height: 34px; }
/* Con prefijo: las clases .qms-h3/.qms-secondary del tema (que carga despues) agrandaban la tarjeta. */
.q-hero-visual .q-float-badge-title { font-size: .78rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.q-hero-visual .q-float-badge-desc { font-size: .66rem; line-height: 1.4; }
@media (min-width: 1024px) {
  .q-hero-visual .q-float-badge-title { font-size: .9rem; }
  .q-hero-visual .q-float-badge-desc { font-size: .72rem; }
}
.q-float-badge-icon { background: var(--q-bg-secondary); }
.q-editorial-img { will-change: auto; }
.q-trust-bar { background: #eef2e9; padding-block: 25px; }
.q-trust-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.q-trust-text { font-size: .8rem; }
.q-trust-sub { font-size: .75rem; padding-top: 4px; }
/* Services: photographic opening row, restrained typographic secondary row. */
#ecosystem { background: var(--q-bg-primary); }
#ecosystem .q-section-header { max-width: none; text-align: left; margin-bottom: 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 72px; align-items: end; }
#ecosystem .q-section-header .q-eyebrow { grid-column: 1 / -1; }
#ecosystem .q-section-header h2 { max-width: 16ch; }
#ecosystem .q-section-header .q-lead { margin: 0 !important; }
.q-ecosystem-grid { gap: 36px 24px; }
.q-eco-card { border: none; border-radius: 0; background: transparent; }
.q-card-media-wrap { height: auto; aspect-ratio: 1.35; border-radius: 10px; flex-shrink: 0; }
.q-card-body { padding: 23px 0 12px; }
.q-eco-card-top { margin-bottom: 20px; }
.q-eco-num { font-family: var(--q-font-sans); font-size: .7rem; letter-spacing: .07em; font-weight: 500; margin-bottom: 12px; }
.q-eco-title { font-size: 1.95rem; margin-bottom: 10px; }
.q-eco-role { font-size: .63rem; letter-spacing: .11em; margin-bottom: 12px; }
.q-eco-desc { font-size: .875rem; line-height: 1.7; }
.q-eco-footer { border-top: 1px solid #193d2a22; padding-top: 15px; }
.q-eco-badge { display: none; }
.q-eco-card:nth-child(n+4) { padding-top: 12px; border-top: 1px solid var(--q-border-medium); }
.q-eco-card:hover { transform: none; background: transparent; box-shadow: none; }
.q-eco-card:focus-within::after { transform: scaleX(1); }
.q-eco-card:focus-within .q-editorial-img { filter: saturate(1.05); }
.q-pillars-grid { gap: 36px; }
.q-pillar-item { text-align: left; border-top: 1px solid var(--q-border-medium); padding-top: 26px; }
.q-pillar-icon { margin-left: 0; background: transparent; border: 0; }
.q-pillar-title { font-size: 1.9rem; }
.q-pillar-desc { font-size: .9rem; line-height: 1.75; }
.q-step-card { border: 0; border-top: 1px solid var(--q-border-medium); border-radius: 0; background: none; padding: 24px 0; }
.q-step-num { background: none; border: 0; font-family: var(--q-font-sans); font-size: .75rem; justify-content: flex-start; height: auto; }
.q-step-title { font-size: 1.65rem; }
.q-step-desc, .q-price-desc, .q-biomarker-desc { font-size: .875rem; line-height: 1.7; }
.q-longevity-banner { border-radius: 18px; padding: clamp(32px,5vw,64px); }
.q-longevity-content { max-width: 580px; }
.q-longevity-content h2 { font-size: clamp(2.5rem,4vw,3.75rem); max-width: 16ch; }
.q-longevity-content p { max-width: 46ch; line-height: 1.7; }
.q-longevity-media-wrap::before { background: linear-gradient(90deg,#193d2a 0%,#193d2ae6 25%,#193d2a55 100%); }
.q-biomarker-grid { gap: 0; border-bottom: 1px solid var(--q-border-medium); }
.q-biomarker-card { border: 0; border-radius: 0; background: none; padding: 28px 24px; }
.q-biomarker-card + .q-biomarker-card { border-left: 1px solid var(--q-border-subtle); }
.q-biomarker-card:hover { transform: none; box-shadow: none; }
.q-biomarker-title { font-family: var(--q-font-sans); font-size: .95rem; font-weight: 600; line-height: 1.5; }
.q-biomarker-tags { display: none; }
/* A bright expectations section replaces the heavy competitive comparison. */
.q-comparison-section { background: #edf1e8; color: var(--q-green-deep); border: 0; }
.q-comparison-section .q-section-header h2 { color: var(--q-green-deep) !important; text-shadow: none !important; }
.q-comparison-section .q-section-header .q-lead { color: var(--q-text-muted) !important; text-shadow: none !important; }
.q-comparison-section .q-eyebrow { color: var(--q-gold-text) !important; text-shadow: none !important; background: transparent !important; border-color: transparent !important; }
.q-compare-grid { max-width: none; gap: 24px; }
.q-compare-card { background: #ffffff80; border: 1px solid #193d2a22; box-shadow: none; backdrop-filter: none; border-radius: 10px; }
.q-compare-card-quintana { background: var(--q-green-deep); }
.q-compare-card-trad h3 { color: var(--q-green-deep); }
.q-compare-card-trad .q-compare-item { color: var(--q-text-muted); }
.q-compare-card-trad .q-compare-badge { color: var(--q-gold-text); border-color: #193d2a22; }
.q-comparison-section .q-compare-card-trad h3 { color: var(--q-green-deep) !important; }
.q-comparison-section .q-compare-card-trad .q-compare-item,
.q-comparison-section .q-compare-card-trad .q-compare-item span {
  color: var(--q-text-muted) !important;
}
.q-comparison-section .q-compare-card-trad .q-compare-icon-neg {
  color: var(--q-green-emerald) !important;
}
.q-compare-card-quintana .q-compare-badge { background: none; border: 0; padding: 0; border-radius: 0; }
.q-compare-card h3 { font-size: 2.2rem; }
.q-compare-item { font-size: .9rem; }
.q-compare-icon-neg { color: var(--q-green-emerald); }
.q-provider-card { border: 0; background: var(--q-bg-secondary); box-shadow: none; border-radius: 12px; }
.q-provider-visual { padding: 32px; background: #e6ecdf; }
.q-provider-portrait { width: 100%; aspect-ratio: 4/3.7; border-radius: 8px; margin-bottom: 24px; }
.q-provider-portrait img { object-position: center 23%; }
.q-provider-quote { font-size: clamp(1.9rem,2.7vw,2.7rem); line-height: 1.25; border: 0; padding: 0; }
.q-provider-license-badge { font-size: .75rem; line-height: 1.7; max-width: 360px; }
.q-pricing-preview { background: none; border: 0; padding: 0; }
.q-price-card { text-align: left; padding: 30px; border-radius: 10px; }
.q-price-card.featured { background: var(--q-bg-secondary); border-color: var(--q-border-medium); box-shadow: none; }
.q-price-title { font-size: 1.7rem; }
.q-price-tag { font-family: var(--q-font-sans); font-size: .8rem; font-weight: 600; }
.q-cta-section { background: var(--q-green-deep); padding-block: 100px; }
.q-footer { background: #153524; border-color: #ffffff26; }
.q-footer-grid { gap: 32px; }
.q-footer p, .q-footer a { overflow-wrap: anywhere; }
.q-footer-link, .q-footer-tagline { font-size: .8rem; }
.q-footer-bottom p { white-space: normal !important; }
.q-footer-bottom { align-items: start; gap: 40px; }
.q-footer-bottom > :last-child { max-width: 250px; }
.q-mobile-bar { padding-bottom: max(12px,env(safe-area-inset-bottom)); box-shadow: none; }
.q-mobile-bar-btn { min-height: 46px; }
.q-service-hero { padding-block: 45px 72px; background: var(--q-bg-secondary); }
.q-service-hero-title { max-width: 18ch; }
.q-contact-layout { gap: 48px; }
.q-contact-info-panel a { overflow-wrap: anywhere; }
.q-booking-card { background: var(--q-green-deep); color: var(--q-text-inverse); padding: clamp(28px,4vw,56px); border-radius: 14px; position: sticky; top: 120px; }
.q-booking-card h2 { color: inherit; font-size: 3rem; margin-bottom: 20px; }
.q-booking-card p { color: var(--q-text-inverse-dim); margin-bottom: 28px; }
.q-booking-card .q-eyebrow { color: var(--q-gold-light); }
.q-booking-card .q-btn { width: 100%; margin-bottom: 14px; }
.q-booking-steps { list-style: none; margin-top: 28px; border-top: 1px solid #ffffff30; }
.q-booking-steps li { padding-block: 17px; border-bottom: 1px solid #ffffff30; font-size: .9rem; }
.q-booking-steps span { color: var(--q-gold-light); margin-right: 14px; }
.q-motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid #ffffff55; background: transparent; color: var(--q-text-inverse); border-radius: 6px; padding: 10px 14px; font: inherit; font-size: .75rem; cursor: pointer; }
.q-motion-paused *, .q-motion-paused *::before, .q-motion-paused *::after { animation-play-state: paused !important; }
.q-reveal, .q-reveal-fade, .q-reveal-scale { opacity: 1; transform: none; will-change: auto; }
.q-motion-ready .q-reveal:not(.is-revealed) { opacity: 0; transform: translateY(16px); }
.q-motion-ready .q-reveal-fade:not(.is-revealed) { opacity: 0; }
.q-motion-ready .q-reveal-scale:not(.is-revealed) { opacity: 0; transform: translateY(10px); }
.q-reveal, .q-reveal-scale, .q-reveal-fade { transition-duration: 500ms; }
.q-hero [class*="q-reveal"] { opacity: 1 !important; transform: none !important; }
@media (max-width: 1279px) {
  .q-nav { display: none; }
  .q-burger { display: flex; }
  .q-header-cta { display: inline-flex; }
}
@media (min-width: 1280px) {
  .q-nav { display: flex; }
  .q-burger { display: none; }
  .q-nav-list { gap: 18px; }
  .q-phone-link { display: inline-flex; }
  .q-header .q-container { max-width: 1440px; padding-inline: 32px; }
  .q-header-inner { gap: 28px; }
}
@media (max-width: 1023px) {
  .q-hero-title { font-size: clamp(3rem,6.3vw,4.2rem); }
  .q-hero-grid { gap: 32px; }
  .q-hero-ctas { flex-direction: column; align-items: stretch; }
  .q-hero-guarantees { flex-direction: column; }
  #ecosystem .q-section-header { gap: 0 32px; }
  .q-card-media-wrap { aspect-ratio: 1.5; }
  .q-biomarker-card:nth-child(3) { border-left: 0; }
  .q-booking-card { position: static; }
}
@media (max-width: 639px) {
  html { scroll-padding-top: 92px; }
  .q-header-inner, .q-header.is-scrolled .q-header-inner { height: 76px; gap: 12px; }
  .q-header-logo, .q-header.is-scrolled .q-header-logo { height: 48px; }
  .q-header-actions { gap: 10px; }
  .q-header-cta { display: none; }
  .q-mobile-drawer { top: 76px; height: calc(100dvh - 76px); padding-bottom: max(28px,env(safe-area-inset-bottom)); }
  .q-hero { padding-block: 36px 42px; }
  .q-hero-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .q-badge-location { font-size: .65rem; margin-bottom: 20px; }
  .q-hero-title { font-size: clamp(3rem,12.5vw,4.5rem); max-width: 11ch; margin-bottom: 20px; }
  .q-hero-lead { font-size: .95rem !important; line-height: 1.7; margin-bottom: 20px; }
  .q-hero-ctas { margin-bottom: 20px; gap: 2px; }
  .q-hero-guarantees { flex-direction: row; gap: 8px 14px; font-size: .68rem; }
  .q-hero-visual { max-width: 380px; width: 100%; margin-inline: auto; }
  .q-trust-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .q-trust-item { padding-bottom: 16px; border-bottom: 1px solid #193d2a20; }
  .q-trust-item:last-child { border: 0; padding-bottom: 0; }
  #ecosystem .q-section-header { display: block; }
  #ecosystem .q-section-header .q-lead { margin-top: 20px !important; }
  .q-eco-title { font-size: 2rem; }
  .q-ecosystem-grid { gap: 32px; }
  .q-biomarker-card { padding: 24px 22px; }
  .q-biomarker-grid { gap: 12px; }
  .q-biomarker-card + .q-biomarker-card { border-left: 0; border-top: 1px solid var(--q-border-subtle); }
  .q-longevity-tags { gap: 8px; }
  .q-longevity-tag { font-size: .65rem; padding: 6px 9px; }
  .q-longevity-media-wrap { width: 100%; opacity: .4; }
  .q-compare-card { padding: 26px; }
  .q-provider-visual, .q-provider-info { padding: 24px; }
  .q-pricing-grid { gap: 16px; }
  .q-price-card, .q-location-info-card { padding: 24px; }
  .q-footer-grid { grid-template-columns: minmax(0,1fr); }
  .q-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .q-cta-btn-group { flex-direction: column; align-items: stretch; }
  .q-cta-section { padding-block: 70px; }
  .q-info-block { padding: 22px; }
  .q-booking-card h2 { font-size: 2.5rem; }
}
@media (hover: none) {
  .q-eco-card:hover, .q-image-frame:hover .q-editorial-img, .q-eco-card:hover .q-editorial-img { transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .q-motion-ready [class*="q-reveal"] { opacity: 1; transform: none; }
  .q-growth-ring-system, .q-btn, .q-editorial-img { translate: none !important; }
}
/* Compatibility with the latest pages added while this review was in progress. */
[class*="q-reveal"], .q-eco-card, .q-pillar-item, .q-step-card { opacity: 1; filter: none; will-change: auto; }
.q-motion-ready [class*="q-reveal"]:not(.is-revealed) { opacity: 0; transform: translateY(12px); }
.q-motion-ready .q-hero [class*="q-reveal"] { opacity: 1; transform: none; filter: none; }
.q-hero-visual { overflow: visible; }
.q-orbit { position: absolute; inset: -18px -18px auto; aspect-ratio: 1 / 1; z-index: -1; pointer-events: none; }
.q-orbit i { position: absolute; inset: 0; border: 1px solid #aabdafa0; border-radius: 49% 51% 46% 54%; animation: q-orbit-turn 48s linear infinite; }
.q-orbit i:nth-child(2) { inset: 18px -15px; border-color: #c4a45e70; animation-direction: reverse; animation-duration: 64s; }
.q-orbit i:nth-child(3) { inset: 45px -30px; border-color: #aabdaf80; animation-duration: 80s; }
@keyframes q-orbit-turn { to { transform: rotate(360deg); } }
.q-image-unavailable { background: radial-gradient(ellipse at 40% 40%,#dce5dc, #f5f3ec); }
.q-image-unavailable::before { content: ''; position: absolute; inset: 15%; border: 1px solid var(--q-eucalyptus); border-radius: 50%; }
.q-editorial-img[hidden], .q-faq-content[hidden] { display: none; }
.q-eco-card:nth-child(n+4) { border-top: 0; padding-top: 0; }
.q-eco-tag { display: none; }
.q-header-cta { opacity: 1; }
.q-biometric-telemetry-card { position: relative; inset: auto; width: 100%; max-width: 580px; margin-top: 32px; z-index: 3; }
.q-bio-telemetry-header { flex-wrap: wrap; gap: 12px; }
.q-aesthetics-section { background: var(--q-bg-primary); }
.q-aesthetics-card { box-shadow: none; border-radius: 10px; }
.q-aesthetics-card-title { font-size: 1.7rem; }
.q-aesthetics-card-desc { font-size: .875rem; line-height: 1.7; }
.q-comparison-range:focus-visible { opacity: 1; outline: 3px solid var(--q-gold); outline-offset: 4px; }
.q-comparison-container { touch-action: pan-y; }
.q-whatsapp-float { width: 48px; height: 48px; right: 20px; bottom: 24px; box-shadow: 0 3px 12px #193d2a20; }
@media (max-width:767px) {
  .q-whatsapp-float { bottom: calc(88px + env(safe-area-inset-bottom)); width: 42px; height: 42px; right: 14px; }
  .q-biometric-telemetry-card { margin-top: 24px; padding: 18px; }
  .q-bio-metrics-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .q-longevity-banner { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .q-motion-ready [class*="q-reveal"] { opacity: 1; transform: none; filter: none; }
  .q-orbit i { animation: none; }
}

/* --- Revision 2026-09-16 --- */

/* R1-13: la respuesta abierta no se recorta (antes max-height: 320px). main.js ya usa [hidden]. */
.q-faq-content,
.q-faq-item.is-open .q-faq-content { max-height: none; overflow: visible; }
.q-faq-item.is-open .q-faq-content { padding-bottom: 22px; }

/* R1-08: en pantallas estrechas el texto legal no se corta */
.q-legal-container > * { min-width: 0; }
.q-legal-content a { overflow-wrap: anywhere; }
/* NUBE-A11Y-LEGALES (22 oct 2026): los enlaces dentro del texto legal, subrayados además de en color (WCAG 1.4.1, axe link-in-text-block) */
.q-legal-content :is(p, li, td, dd) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.q-legal-content :is(p, li, td, dd) a:hover { text-decoration-thickness: 2px; }
@media (max-width: 374px) { .q-legal-content { overflow-wrap: anywhere; } } /* también el texto: a 320 px el correo sin enlace hacía desplazar la página 2–7 px; desde 375 px cabe y no se parte (NUBE-QA-PULIDO) */
@media (max-width: 640px) {
  .q-legal-content { padding: 24px 18px; }
  .q-legal-nav { position: static; padding: 18px; }
}

/* R1-11: al tabular, la barra fija movil ya no tapa el elemento enfocado */
@media (max-width: 767px) {
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* R1-60: al imprimir, el contenido con animacion de entrada se ve */
@media print {
  [class*="q-reveal"],
  .q-eco-card,
  .q-step-card,
  .q-pillar-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .q-whatsapp-float,
  .q-mobile-bar,
  .q-lead-modal-backdrop,
  .q-motion-toggle { display: none !important; }
}

/* ============================================================
   Firma "Built by Salmeron Studios" — kit oficial del estudio
   (kit-firma-salmeron, variante C: js/firma-salmeron.js + logo
   img/brand/salmeron-logo-128.webp). .qms-studio-signature solo la
   coloca en este pie; debajo va el CSS del kit sin cambios salvo el
   selector de tema: el sitio no tiene tema claro y el pie siempre es
   verde oscuro, asi que el halo queda activo. Para ponerla sobre un
   fondo claro, anadir .is-on-light al contenedor.
   ============================================================ */
.qms-studio-signature {
  /* Heredar daria el verde oscuro del cuerpo: sobre el pie verde no se leeria. */
  color: var(--q-text-inverse-dim, #DCE5DC);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: center;
}
/* base.css pinta a:hover de verde oscuro (mas especifico que .lp-firma):
   sin esto el texto desaparece sobre el pie al pasar el raton. */
.qms-studio-signature .lp-firma,
.qms-studio-signature .lp-firma:hover,
.qms-studio-signature .lp-firma:focus-visible { color: inherit; }

.lp-firma {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

/* La opacidad de reposo va solo en texto y flecha: el logo, que ya es oscuro,
   se muestra siempre al 100 %. */
.lp-firma-texto,
.lp-firma-flecha {
  opacity: 0.72;
  transition: opacity 200ms ease;
}

/* Capa de hover (CSS). La capa interna (.lp-firma-logo) la anima el JS (Framer Motion o Web Animations),
   así el transform del hover y el del clic no se pisan. */
.lp-firma-elev {
  display: inline-flex;
  transform: translateZ(0);
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 200ms ease;
}

.lp-firma-logo {
  display: inline-flex;
  transform-origin: 50% 50%;
  will-change: transform;
}

.lp-firma-logo > svg,
.lp-firma-logo > img {
  display: block;
  height: 1.5em; /* ≈24 px: a 18 px el símbolo se empasta */
  width: auto;
}

/* Tema oscuro (por defecto): halo claro muy fino. El azul marino del logo
   tiene 1.46:1 contra #000 y sin esto se pierde. */
.lp-firma-logo > svg,
.lp-firma-logo > img {
  filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.35));
}
.qms-studio-signature.is-on-light .lp-firma-logo > svg,
.qms-studio-signature.is-on-light .lp-firma-logo > img {
  filter: none;
}

.lp-firma-flecha {
  display: inline-block;
  line-height: 1;
}

@media (hover: hover) {
  .lp-firma:hover .lp-firma-texto,
  .lp-firma:hover .lp-firma-flecha {
    opacity: 1;
  }
  .lp-firma:hover .lp-firma-elev {
    transform: translateY(-1px) scale(1.03);
    filter: brightness(1.15);
  }
}

.lp-firma:focus-visible .lp-firma-texto,
.lp-firma:focus-visible .lp-firma-flecha {
  opacity: 1;
}
.lp-firma:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.lp-firma:focus-visible .lp-firma-elev {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .lp-firma-texto,
  .lp-firma-flecha,
  .lp-firma-elev {
    transition: none;
  }
  .lp-firma:hover .lp-firma-elev,
  .lp-firma:focus-visible .lp-firma-elev {
    transform: none; /* se conserva solo el cambio de brillo/opacidad */
  }
}

/* Este proyecto no usa Tailwind ni tenia .sr-only: se deja la del kit. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Antibots (Turnstile) en el formulario de la guia: sin clave el hueco queda vacio y no ocupa sitio. */
.q-lead-turnstile { display: flex; justify-content: center; margin: 0 0 12px; }
.q-lead-turnstile:empty { display: none; }

/* ============================================================
   Revision 2026-09-16, ronda 3
   ============================================================ */
/* R1-19: el idioma alternativo es un enlace con el mismo aspecto que el boton */
a.q-lang-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* UX-03: en movil ya esta la barra inferior; en tablet y portatil, icono o numero */
@media (max-width: 767px) { .q-header .q-phone-link { display: none; } }
@media (min-width: 768px) { .q-header .q-phone-link { display: inline-flex; } }
@media (min-width: 768px) and (max-width: 1279px) {
  .q-header .q-phone-link { position: relative; width: 44px; height: 44px; padding: 0; justify-content: center; border: 1px solid rgba(25,61,42,.16); border-radius: 999px; }
  .q-header .q-phone-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* UX-22: la cinta de estetica se desplaza; quieta y completa con movimiento reducido o pausado */
.q-marquee-ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.q-ticker-track { gap: 0 !important; animation: q-ticker 45s linear infinite; }
.q-ticker-track > span { padding-right: 32px; }
@keyframes q-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .q-ticker-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .q-marquee-ticker { white-space: normal !important; -webkit-mask-image: none; mask-image: none; }
  .q-ticker-track > span:nth-child(n+7) { display: none; }
}
.q-motion-paused .q-ticker-track { animation-play-state: paused; }
/* UX-23: rejillas sin tarjetas huerfanas */
@media (min-width: 1024px) { .q-pillars-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .q-related-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
/* UX-26: credenciales y horarios sin cortes raros */
.q-nowrap { white-space: nowrap; }
/* UX-27: acabados */
.q-provider-visual { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.q-provider-visual .q-image-frame { width: clamp(150px, 16vw, 210px) !important; height: clamp(150px, 16vw, 210px) !important; }
.q-longevity-media-wrap { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.q-longevity-media-wrap::before { background: linear-gradient(90deg, rgba(25,61,42,.55) 0%, rgba(25,61,42,.15) 100%); }
.q-comparison-section .q-eyebrow { display: inline-flex !important; }
#primary-care h2, #aesthetics .q-section-header h2 { margin-bottom: 20px; }
.q-price-card.featured { box-shadow: 0 24px 60px rgba(7,28,16,.16), 0 4px 12px rgba(7,28,16,.08); border-color: var(--q-gold); }
/* A11Y-14: los encabezados del pie ahora son h2 */
h2.q-footer-heading { line-height: 1.4; margin-top: 0; }

/* --- 24 sep 2026, dictamen de auditoría (QMS-CLA-004): aviso junto al botón flotante de WhatsApp.
   26 sep 2026 (dueño): más pequeño y oculto hasta que se toca, se pulsa o se enfoca el botón;
   sigue en el DOM y enlazado por aria-describedby, así el lector de pantalla lo lee siempre. --- */
/* 26 sep 2026 (dueño, 2): sin espacio sobrante (ancho al contenido; el salto de línea va en el texto de wa.note, EN y ES, para que las dos líneas midan casi lo mismo) y acabado de cristal líquido
   (translúcido con desenfoque del fondo, borde y brillo superior); si el navegador no soporta backdrop-filter, fondo casi opaco. */
.q-wa-note { position: fixed; right: 20px; bottom: 80px; z-index: 989; margin: 0; width: max-content; max-width: 250px; padding: 7px 11px; background: rgba(255,255,255,.92); color: #193D2A; font-size: .68rem; line-height: 1.35; border-radius: 12px; border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 20px rgba(25,61,42,.18); text-align: right; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, color .15s ease, text-shadow .15s ease, border-color .15s ease; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* 26 sep (dueño, 3): "que sea transparente": tinte blanco al 22 % de media con degradado de brillo, desenfoque fuerte y canto luminoso */
  .q-wa-note.q-wa-note--oscuro { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); border-color: rgba(255,255,255,.4); }
  .q-wa-note { background: linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 100%); -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.08); backdrop-filter: blur(24px) saturate(1.8) brightness(1.08); border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(7,28,16,.22); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
}
.q-whatsapp-float:hover + .q-wa-note,
.q-whatsapp-float:focus-visible + .q-wa-note,
.q-whatsapp-float:active + .q-wa-note { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 767px) { .q-wa-note { right: 14px; bottom: calc(138px + env(safe-area-inset-bottom)); max-width: 250px; font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .q-wa-note { transition: none; } }
@media print { .q-wa-note { display: none; } }


/* NUBE-CSP-ESTILOS (22 oct 2026): lo que iba en atributos style="" de las páginas y de las traducciones de js/main.js. La
   CSP ya no permite estilos en línea (style-src sin 'unsafe-inline'), así que cada regla copia un atributo tal cual.
   `:not(#_)` le da a la regla el peso de un id: un style="" ganaba a cualquier regla de las hojas y así sigue ganando a las
   que ganaba (las de :hover incluidas). Lo que llevaba !important lo sigue llevando. */
.menu-movil-botones:not(#_) { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.boton-ancho:not(#_) { width: 100%; justify-content: center; }
.legal-vigencia:not(#_) { font-size: 0.85rem; color: var(--q-text-muted); margin-bottom: 20px; }
.sin-margen-arriba:not(#_) { margin-top: 0; }
.legal-tarjeta-texto:not(#_) { margin-bottom: 6px; }
.enlace-esmeralda:not(#_) { color: var(--q-green-emerald); font-weight: 600; }
.pie-texto:not(#_) { font-size: var(--q-text-xs); line-height: 1.6; margin-bottom: 8px; }
.enlace-oro-claro:not(#_) { color: var(--q-gold-light); }
.pie-nota:not(#_) { font-size: var(--q-text-xs); color: var(--q-text-inverse-dim); }
.pie-copyright:not(#_) { white-space: nowrap; }
.pie-legal-barra:not(#_) { border-top: 1px solid rgba(217, 190, 134, 0.35); margin-top: 24px; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pie-legal-enlaces:not(#_) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Sin el color: el blanco con !important del atributo dejaba el texto blanco sobre oro al pasar el ratón (1,8:1); el blanco
   de reposo y el #0F1E16 del :hover (9,6:1) los pone .q-legal-pill de components.css (dirección, 22 oct 2026) */
.pie-legal-pildora:not(#_) { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; background: rgba(217, 190, 134, 0.18); border: 1.5px solid #D9BE86 !important; font-weight: 600; font-size: 0.88rem; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.guia-exito-oculta:not(#_) { display: none; } /* main.js la muestra con style.display = 'block' (CSSOM, que la CSP permite) */
.oro-cursiva:not(#_) { color: var(--q-gold-text); font-style: italic; }

/* ---- css/qms-theme.css ---- */
/* ==========================================================================
   qms-theme.css — Quintana Medical Services — Ronda 7 (final)
   Capa visual reversible. Activación: <html class="qms-theme"> + <link>.
   Desactivación: quitar la clase del <html> y el <link>. No cambia contenido ni DOM.
   Todas las reglas van bajo :where(html.qms-theme) → el prefijo no suma
   especificidad; la especificidad real es la del selector .qms-*.
   ========================================================================== */

/* -------- 1. Tokens: CLARO (0,0,0) — regla base ------------------------- */
:where(html.qms-theme),
:where(html.qms-theme .qms-light),
:where(html.qms-theme .qms-light-2),
:where(html.qms-theme .qms-card) {
  --qms-fg: #0F2A1A;
  --qms-fg-2: #3F5A48;
  --qms-link: #113F25;
  --qms-accent: #7A5D2E;
  --qms-focus: #113F25;
  --qms-hair: rgba(17, 63, 37, .16);
  --qms-sh: 0 10px 30px rgba(7, 28, 16, .12), 0 2px 6px rgba(7, 28, 16, .08);
  --qms-sh-hi: inset 0 1px 0 rgba(255, 255, 255, .85);
  --qms-sage-text: #4E6A3C;
  --qms-ghost-hover: rgba(17, 63, 37, .08);
}

/* -------- 2. Tokens: OSCURO (0,1,0) — va DESPUÉS y con más especificidad.
   .qms-card y .qms-card--dark son EXCLUYENTES (nunca ambas en el mismo
   elemento). Si alguien las combina, esta regla prevalece igualmente. ---- */
:where(html.qms-theme) .qms-deep,
:where(html.qms-theme) .qms-card--dark {
  --qms-fg: #FAF9F5;
  --qms-fg-2: #C9D2C6;
  --qms-link: #FAF9F5;
  --qms-accent: #D9BE86;
  --qms-focus: #D9BE86;
  --qms-hair: rgba(250, 249, 245, .14);
  --qms-sh: 0 14px 36px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --qms-sh-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
  --qms-sage-text: #C9D2C6;
  --qms-ghost-hover: rgba(250, 249, 245, .10);
}

/* -------- 3. Fondo global (desplazamiento normal; sin attachment fixed) -- */
:where(html.qms-theme) {
  overflow-x: clip;
  background-color: #0C2E1B;
  background-image:
    radial-gradient(120% 80% at 15% 0%, rgba(122, 156, 128, .22) 0%, rgba(122, 156, 128, 0) 60%),
    linear-gradient(160deg, #0C2E1B 0%, #113F25 100%);
  background-repeat: no-repeat;
  min-height: 100%;
}
:where(html.qms-theme) body {
  background: transparent;
  overflow-x: clip;
}
:where(html.qms-theme) .q-hero {
  overflow: hidden;
}

/* -------- 4. Superficies ------------------------------------------------ */
:where(html.qms-theme) .qms-deep {
  background: transparent;
  color: var(--qms-fg);
}
:where(html.qms-theme) .qms-deep svg {
  color: var(--qms-accent);
}
:where(html.qms-theme) .qms-light {
  background: #FAF9F5;
  color: var(--qms-fg);
}
:where(html.qms-theme) .qms-light-2 {
  background: #F2F0E8;
  color: var(--qms-fg);
}
/* .qms-header: superficie clara elegante tanto al inicio como al hacer scroll.
   El logo y los enlaces de navegación conservan contraste nítido y nunca se pierden.
   NUNCA aplicar .qms-deep ni otra superficie a un ancestro del header/logo. */
:where(html.qms-theme) .qms-header {
  background: rgba(250, 251, 247, 0.96);
  box-shadow: 0 1px 0 rgba(17, 63, 37, .08);
}
:where(html.qms-theme) .qms-header.is-scrolled,
:where(html.qms-theme) .q-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(7, 28, 16, .08);
}

/* -------- 5. Sección: ritmo y contenedor ------------------------------- */
:where(html.qms-theme) .qms-section {
  box-sizing: border-box;
  padding-inline: max(clamp(1rem, 4vw, 3rem), calc((100% - 1200px) / 2));
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

/* -------- 6. Grid opt-in (3/2/1). Solo si TODOS los hijos son tarjetas.
   AMPLIAR CON INVENTARIO: añadir aquí cada mecanismo de ocultación que use
   el sitio (clases de utilidades, atributos) antes de producción. ------- */
:where(html.qms-theme) .qms-grid:where(:not([hidden]):not([aria-hidden="true"]):not(.hidden):not(.is-hidden):not(.d-none)) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .75rem + 1.5vw, 2rem);
}
:where(html.qms-theme) .qms-grid > :where(*) {
  min-width: 0;
}
@media (max-width: 62rem) {
  :where(html.qms-theme) .qms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  :where(html.qms-theme) .qms-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------- 7. Tarjetas (clases excluyentes: .qms-card O .qms-card--dark) - */
:where(html.qms-theme) :where(.qms-card, .qms-card--dark) {
  box-sizing: border-box;
  border-radius: 16px;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  box-shadow: var(--qms-sh), var(--qms-sh-hi);
  border: 1px solid var(--qms-hair);
  color: var(--qms-fg);
}
:where(html.qms-theme) .qms-card { background: #FFFFFF; }
:where(html.qms-theme) .qms-card--dark { background: #1B4A30; }

/* -------- 8. Fotos y elevación (sin tocar display/height/overflow) ----- */
:where(html.qms-theme) .qms-photo {
  border-radius: 12px;
  outline: 1px solid var(--qms-hair);
  outline-offset: -1px;
  box-shadow: var(--qms-sh);
}
:where(html.qms-theme) .qms-elev-2 {
  box-shadow: 0 24px 60px rgba(7, 28, 16, .22), 0 4px 12px rgba(7, 28, 16, .12);
}

/* -------- 9. Tipografía por clase (opt-in; nunca font-family) ---------- */
:where(html.qms-theme) :is(.qms-h1, h1.qms-h1) {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  font-weight: 600;
  color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-h2, h2.qms-h2) {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.005em;
  font-weight: 600;
  color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-h3, h3.qms-h3) {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.3;
  font-weight: 600;
  color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-body, p.qms-body, span.qms-body) {
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  color: var(--qms-fg);
}
:where(html.qms-theme) :is(.qms-secondary, p.qms-secondary, span.qms-secondary) {
  font-size: clamp(.875rem, .85rem + .15vw, .9375rem);
  line-height: 1.5;
  color: var(--qms-fg-2);
}
:where(html.qms-theme) .qms-price {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--qms-accent);
}
:where(html.qms-theme) .qms-label-sage {
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--qms-sage-text);
}

/* -------- 10. Enlaces (opt-in). Nav: SOLO a.qms-nav-link; nunca al logo. */
:where(html.qms-theme) a.qms-link:not(.qms-btn) {
  color: var(--qms-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--qms-accent);
}
:where(html.qms-theme) a.qms-nav-link {
  color: var(--qms-fg);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  :where(html.qms-theme) a.qms-link:not(.qms-btn):hover { text-decoration-thickness: 2px; }
  :where(html.qms-theme) a.qms-nav-link:hover { color: var(--qms-accent); }
}

/* -------- 11. Botones. Sin display. Los estados disabled/loading NO reciben
   NINGÚN estilo del tema (base, variantes, hover, foco, transición).
   AMPLIAR CON INVENTARIO: estados de carga/deshabilitado del sitio. ------ */
:where(html.qms-theme) .qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
  box-sizing: border-box;
  border-radius: 999px;
  padding: .75em 1.5em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--qms-focus);
  background: #113F25;
  color: #FAF9F5;
  box-shadow: 0 6px 16px rgba(7, 28, 16, .18);
}
:where(html.qms-theme) .qms-btn.qms-btn--gold:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
  background: #AE8A4C;
  color: #071C10;
  border-color: var(--qms-accent);
}
:where(html.qms-theme) .qms-btn.qms-btn--ghost:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
  background: transparent;
  color: var(--qms-fg);
  border-color: var(--qms-hair);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  :where(html.qms-theme) .qms-btn:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
    background: #1A4D2E;
    box-shadow: 0 8px 20px rgba(7, 28, 16, .24);
  }
  :where(html.qms-theme) .qms-btn.qms-btn--gold:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
    background: #B8955A;
  }
  :where(html.qms-theme) .qms-btn.qms-btn--ghost:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])) {
    background: var(--qms-ghost-hover);
    box-shadow: none;
  }
}

/* -------- 12. Foco visible (teclado) ------------------------------------ */
:where(html.qms-theme) :where(.qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])), a.qms-link, a.qms-nav-link):focus-visible {
  outline: 2px solid var(--qms-focus);
  outline-offset: 3px;
}

/* -------- 13. Campos: aspecto hundido. Lista explícita de tipos.
   Excluye disabled/readonly/aria-invalid/etc.
   AMPLIAR CON INVENTARIO: clases de estado del sitio (error, success…),
   incluidas las definidas en un padre (.has-error *, .form-group.error *). */
:where(html.qms-theme) .qms-field:where(
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="number"], input[type="date"], input[type="time"],
  input[type="password"], textarea, select
):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)) {
  box-sizing: border-box;
  background: #F4F2EB;
  color: #0F2A1A;
  border: 1px solid rgba(17, 63, 37, .24);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(17, 63, 37, .12);
  padding: .7em .9em;
}
:where(html.qms-theme) .qms-field:where(
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="number"], input[type="date"], input[type="time"],
  input[type="password"], textarea, select
):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *))::placeholder {
  color: #3F5A48;
  opacity: 1;
}
/* Foco: borde INTERIOR fijo #113F25 (sobre fondo de campo) + ANILLO exterior
   contextual var(--qms-focus) (sobre la superficie). Dos capas separadas. */
:where(html.qms-theme) .qms-field:where(
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="number"], input[type="date"], input[type="time"],
  input[type="password"], textarea, select
):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)):focus-visible {
  border-color: #113F25;
  outline: 2px solid var(--qms-focus);
  outline-offset: 3px;
}

/* -------- 13.b Refinamiento: Enlace de teléfono, botones y ritmo interno de tarjetas */
:where(html.qms-theme) .q-phone-link {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--qms-fg);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(17, 63, 37, 0.08);
  border: 1px solid rgba(17, 63, 37, 0.2);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
:where(html.qms-theme) .q-phone-link:hover {
  background: rgba(17, 63, 37, 0.15);
  border-color: rgba(17, 63, 37, 0.35);
  color: var(--qms-link);
  transform: translateY(-1px);
}
:where(html.qms-theme) .q-phone-link svg {
  color: var(--qms-accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
:where(html.qms-theme .qms-deep) .q-phone-link {
  color: #FAF9F5;
  background: rgba(250, 249, 245, 0.12);
  border: 1px solid rgba(250, 249, 245, 0.28);
}
:where(html.qms-theme .qms-deep) .q-phone-link:hover {
  background: rgba(250, 249, 245, 0.22);
  border-color: #FAF9F5;
  color: #FAF9F5;
}
:where(html.qms-theme .qms-deep) .q-phone-link svg {
  color: #D9BE86;
}
@media (min-width: 1024px) {
  :where(html.qms-theme) .qms-header .q-phone-link,
  :where(html.qms-theme) .q-phone-link {
    display: inline-flex;
  }
}

/* Botón secundario del Hero ("Discover our care") */
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary,
:where(html.qms-theme .qms-deep) .qms-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #FAF9F5;
  background: rgba(250, 249, 245, 0.08);
  border: 1.5px solid rgba(250, 249, 245, 0.42);
  border-radius: 999px;
  padding: 0.85rem 1.85rem;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.2s ease;
}
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary:hover,
:where(html.qms-theme .qms-deep) .qms-btn--ghost:hover {
  background: rgba(250, 249, 245, 0.2);
  border-color: #FAF9F5;
  color: #FAF9F5;
  text-decoration: none;
  transform: translateY(-1px);
}
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary .q-btn-arrow,
:where(html.qms-theme .qms-deep) .qms-btn--ghost .q-btn-arrow {
  color: var(--qms-accent);
  transition: transform 0.2s ease;
}
:where(html.qms-theme) .q-hero-ctas .q-btn-secondary:hover .q-btn-arrow,
:where(html.qms-theme .qms-deep) .qms-btn--ghost:hover .q-btn-arrow {
  transform: translateX(4px);
}

/* Ritmo vertical y espaciado generoso en tarjetas de proceso / pasos (Journey) */
:where(html.qms-theme) .q-step-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
}
:where(html.qms-theme) .q-step-num {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--qms-accent);
  margin-bottom: 14px;
}
:where(html.qms-theme) .q-step-title {
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 14px;
  color: var(--qms-fg);
}
:where(html.qms-theme) .q-step-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-bottom: 0;
  color: var(--qms-fg-2);
}

/* Ritmo vertical y espaciado generoso en tarjetas de Servicios (Ecosistema) */
:where(html.qms-theme) .q-eco-card,
:where(html.qms-theme) .q-eco-card:nth-child(n+4) {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: flex;
  flex-direction: column;
}
:where(html.qms-theme) .q-eco-card .q-card-body {
  padding: 18px 0 4px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
:where(html.qms-theme) .q-eco-card-top {
  margin-bottom: 18px;
  flex-grow: 1;
}
:where(html.qms-theme) .q-eco-num {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--qms-accent);
  margin-bottom: 10px;
  display: inline-block;
}
:where(html.qms-theme) .q-eco-title {
  font-size: clamp(1.5rem, 1.3rem + .5vw, 1.85rem);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--qms-fg);
}
:where(html.qms-theme) .q-eco-role {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--qms-sage-text);
  margin-bottom: 14px;
}
:where(html.qms-theme) .q-eco-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--qms-fg-2);
  margin-bottom: 0;
}
:where(html.qms-theme) .q-eco-card-bottom {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--qms-hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Espaciado en Pilares de Longevidad */
:where(html.qms-theme) .q-pillar-item {
  display: flex;
  flex-direction: column;
}
:where(html.qms-theme) .q-pillar-title {
  margin-top: 10px;
  margin-bottom: 14px;
  line-height: 1.25;
  color: var(--qms-fg);
}
:where(html.qms-theme) .q-pillar-desc {
  line-height: 1.65;
  color: var(--qms-fg-2);
  margin-bottom: 0;
}

/* Espaciado en Tarjetas de Precios y Estética */
:where(html.qms-theme) .q-price-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
:where(html.qms-theme) .q-price-card.featured {
  background: #FFFFFF;
  border-color: var(--qms-hair);
}
:where(html.qms-theme) .q-price-title {
  margin-top: 8px;
  margin-bottom: 10px;
  line-height: 1.25;
}
:where(html.qms-theme) .q-price-tag {
  margin-bottom: 12px;
}
:where(html.qms-theme) .q-price-desc {
  margin-bottom: 20px;
  line-height: 1.65;
}
:where(html.qms-theme) .q-aesthetics-card-title {
  margin-top: 6px;
  margin-bottom: 12px;
  line-height: 1.25;
}
:where(html.qms-theme) .q-aesthetics-card-desc {
  margin-bottom: 14px;
  line-height: 1.65;
}

/* Icono de acordeón FAQ: Centrado geométrico perfecto mediante pseudo-elementos */
:where(html.qms-theme) .q-faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--qms-hair);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-left: 16px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease;
}
:where(html.qms-theme) .q-faq-icon::before,
:where(html.qms-theme) .q-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--qms-fg);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
}
:where(html.qms-theme) .q-faq-icon::before {
  width: 12px;
  height: 1.5px;
}
:where(html.qms-theme) .q-faq-icon::after {
  width: 1.5px;
  height: 12px;
}
:where(html.qms-theme) .q-faq-trigger:hover .q-faq-icon {
  border-color: var(--qms-accent);
}
:where(html.qms-theme) .q-faq-trigger:hover .q-faq-icon::before,
:where(html.qms-theme) .q-faq-trigger:hover .q-faq-icon::after {
  background-color: var(--qms-accent);
}
:where(html.qms-theme) .q-faq-item.is-open .q-faq-icon {
  transform: rotate(45deg);
  background-color: #113F25;
  border-color: #113F25;
}
:where(html.qms-theme) .q-faq-item.is-open .q-faq-icon::before,
:where(html.qms-theme) .q-faq-item.is-open .q-faq-icon::after {
  background-color: #FAF9F5;
}

/* -------- 14. Movimiento: transiciones solo si no hay preferencia reducida */
@media (prefers-reduced-motion: no-preference) {
  :where(html.qms-theme) :where(.qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])), a.qms-link, a.qms-nav-link) { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
}

/* -------- 15. Forced colors (acotado a .qms-*). Especificidad ≥ a la de
   cada regla que anula, y al final de la hoja: gana por especificidad u orden. */
@media (forced-colors: active) {
  :where(html.qms-theme) .qms-card,
  :where(html.qms-theme) .qms-card--dark,
  :where(html.qms-theme) .qms-btn.qms-btn--gold:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
  :where(html.qms-theme) .qms-btn.qms-btn--ghost:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
  :where(html.qms-theme) .qms-btn.qms-btn--gold:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
  :where(html.qms-theme) .qms-btn.qms-btn--ghost:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
  :where(html.qms-theme) .qms-btn:hover:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
  :where(html.qms-theme) .qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])),
  :where(html.qms-theme) .qms-field.qms-field:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], textarea, select):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)) {
    box-shadow: none;
    border: 1px solid CanvasText;
  }
  :where(html.qms-theme) .qms-btn.qms-btn:where(:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-loading):not([aria-busy="true"])):focus-visible,
  :where(html.qms-theme) a.qms-link.qms-link:focus-visible,
  :where(html.qms-theme) a.qms-nav-link.qms-nav-link:focus-visible,
  :where(html.qms-theme) .qms-field.qms-field:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], textarea, select):where(:not(:disabled):not([readonly]):not([aria-invalid="true"]):not(.is-invalid):not(.invalid):not(.error):not(.has-error *):not(.form-group.error *):not(fieldset[aria-invalid] *)):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
    border-color: CanvasText;
  }
  /* elevación: solo se retira la sombra (sin border ni outline) */
  :where(html.qms-theme) .qms-elev-2 { box-shadow: none; }
  /* header y fotos: contorno que NO altera la caja (sin border) */
  :where(html.qms-theme) .qms-header,
  :where(html.qms-theme) .qms-photo,
  :where(html.qms-theme) .qms-photo.qms-elev-2 { box-shadow: none; outline: 1px solid CanvasText; outline-offset: -1px; }
}

/* Anchor Scroll Margins for Sticky Header */
:where(html.qms-theme) section[id] {
  scroll-margin-top: 80px;
}
@media (max-width: 767px) {
  :where(html.qms-theme) .q-welcome-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  :where(html.qms-theme) .q-welcome-scroll-btn,
  :where(html.qms-theme) .q-welcome-guide-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  :where(html.qms-theme) section[id] {
    scroll-margin-top: 64px;
  }
}

/* -------- 16. Welcome Cinema (Pantalla 1 Completa) -------- */
:where(html.qms-theme) .q-welcome-cinema {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 80px);
  min-height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0C2E1B;
  color: #FAF9F5;
  text-align: center;
  padding: 4rem 1.5rem 6rem;
  box-sizing: border-box;
}

:where(html.qms-theme) .q-welcome-video-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

:where(html.qms-theme) .q-welcome-video-backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.95) contrast(1.08);
  transition: opacity 0.5s ease;
}

:where(html.qms-theme) .q-welcome-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 45%, rgba(12, 46, 27, 0.42) 0%, rgba(10, 32, 19, 0.74) 65%, rgba(8, 25, 15, 0.92) 100%),
    linear-gradient(to bottom, rgba(12, 46, 27, 0.35) 0%, transparent 40%, rgba(12, 46, 27, 0.90) 100%);
}

:where(html.qms-theme) .q-welcome-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

:where(html.qms-theme) .q-welcome-emblem {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}

:where(html.qms-theme) .q-welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 25, 15, 0.62);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 190, 134, 0.35);
  color: #D9BE86;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 9999px;
  margin-bottom: 22px;
}

:where(html.qms-theme) .q-welcome-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 4.2rem);
  line-height: 1.15;
  max-width: 100%;
  word-wrap: break-word;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 18px 0;
  letter-spacing: -0.015em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

:where(html.qms-theme) .q-welcome-tagline {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: #E6ECE8;
  max-width: 640px;
  margin: 0 0 34px 0;
  font-weight: 300;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

:where(html.qms-theme) .q-welcome-scroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(217, 190, 134, 0.95) 0%, rgba(197, 163, 98, 0.95) 100%);
  color: #0C2E1B;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(217, 190, 134, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

:where(html.qms-theme) .q-welcome-scroll-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 28px rgba(217, 190, 134, 0.4);
  color: #0C2E1B;
}

:where(html.qms-theme) .q-welcome-scroll-arrow {
  animation: q-arrow-bounce 2s infinite ease-in-out;
}

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

:where(html.qms-theme) .q-welcome-scroll-indicator {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(250, 249, 245, 0.7);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.2s ease;
}

:where(html.qms-theme) .q-welcome-scroll-indicator:hover {
  color: #D9BE86;
}



/* Floating Curator Preview Bar */
:where(html.qms-theme) .q-hero-preview-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(12, 46, 27, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(217, 190, 134, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  border-radius: 9999px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 95vw;
  animation: q-curator-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes q-curator-slide-up {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

:where(html.qms-theme) .q-preview-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

:where(html.qms-theme) .q-preview-bar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #D9BE86;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-left: 6px;
  padding-right: 4px;
  white-space: nowrap;
}

:where(html.qms-theme) .q-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #52B788;
  box-shadow: 0 0 8px #52B788;
  display: inline-block;
}

:where(html.qms-theme) .q-preview-bar-options {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

:where(html.qms-theme) .q-pbar-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #FAF9F5;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1.2;
}

:where(html.qms-theme) .q-pbar-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(217, 190, 134, 0.5);
  color: #FFFFFF;
}

:where(html.qms-theme) .q-pbar-btn.is-active {
  background: #D9BE86;
  color: #0C2E1B;
  font-weight: 600;
  border-color: #D9BE86;
  box-shadow: 0 4px 14px rgba(217, 190, 134, 0.35);
}

:where(html.qms-theme) .q-pbar-btn-lead {
  background: linear-gradient(135deg, rgba(82, 183, 136, 0.25) 0%, rgba(217, 190, 134, 0.25) 100%);
  border-color: rgba(217, 190, 134, 0.45);
  color: #FAF9F5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
:where(html.qms-theme) .q-pbar-btn-lead:hover {
  background: linear-gradient(135deg, rgba(82, 183, 136, 0.38) 0%, rgba(217, 190, 134, 0.38) 100%);
  border-color: #D9BE86;
}

/* Modal Editorial de Captura de Guía Médica (Lifeforce Elevated) */
:where(html.qms-theme) .q-lead-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 26, 17, 0.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
}

:where(html.qms-theme) .q-lead-modal-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

:where(html.qms-theme) .q-lead-modal-dialog {
  /* Cristal Líquido Nevado Translúcido / Frosted Snow Glassmorphism */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(247, 250, 248, 0.78) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  color: #1A1A1A;
  border-radius: 24px;
  max-width: 520px;
  width: 100%;
  padding: 42px 36px 34px;
  position: relative;
  box-shadow: 
    0 30px 80px rgba(5, 22, 14, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.90) inset,
    0 2px 5px rgba(255, 255, 255, 0.95) inset,
    inset 0 0 24px rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(217, 190, 134, 0.55);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html.qms-theme) .q-lead-modal-backdrop.is-visible .q-lead-modal-dialog {
  transform: scale(1) translateY(0);
}

:where(html.qms-theme) .q-lead-modal-close {
  /* Decisión 7 del dueño (16 oct 2026): la × era el carácter &times;, cuya tinta queda 1 px por
     debajo del centro de su caja (3,5 px del dispositivo a densidad 3). Ahora es un trazo SVG
     simétrico de 14 px centrado por la rejilla en un botón de 44 px (objetivo táctil mínimo;
     antes 36). El centro no se mueve: 16 + 18 = 12 + 22 = 34 px desde cada borde. */
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(12, 46, 27, 0.07);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #0C2E1B;
  transition: background 0.2s, transform 0.2s;
}

:where(html.qms-theme) .q-lead-modal-close svg {
  display: block;
  width: 14px;
  height: 14px;
}

:where(html.qms-theme) .q-lead-modal-close:hover {
  background: rgba(12, 46, 27, 0.14);
  transform: scale(1.08);
}

:where(html.qms-theme) .q-lead-modal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
  color: #0C2E1B;
  text-align: center;
  margin-bottom: 10px;
}

:where(html.qms-theme) .q-lead-modal-lead {
  font-size: 14.5px;
  line-height: 1.5;
  color: #4A5A50;
  text-align: center;
  margin-bottom: 22px;
}

:where(html.qms-theme) .q-lead-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:where(html.qms-theme) .q-lead-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #2D3A32;
}

:where(html.qms-theme) .q-lead-benefit-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(82, 183, 136, 0.2);
  color: #113F25;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 12px;
  font-weight: bold;
}

:where(html.qms-theme) .q-lead-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

:where(html.qms-theme) .q-lead-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(15, 41, 30, 0.18);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1A1A1A;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

:where(html.qms-theme) .q-lead-input:focus {
  background: rgba(255, 255, 255, 0.96);
  border-color: #0C2E1B;
  box-shadow: 0 0 0 3px rgba(12, 46, 27, 0.12);
}

:where(html.qms-theme) .q-lead-submit {
  height: 50px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #D9BE86 0%, #C9A96E 100%);
  color: #0C2E1B;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 190, 134, 0.4);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

:where(html.qms-theme) .q-lead-submit:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(217, 190, 134, 0.5);
  transform: translateY(-1px);
}

:where(html.qms-theme) .q-lead-disclaimer {
  font-size: 12px;
  color: #617369;
  text-align: center;
  margin-top: 14px;
  line-height: 1.4;
}

:where(html.qms-theme) .q-lead-consent-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px;
  text-align: left;
}

:where(html.qms-theme) .q-lead-consent-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #2F3E35 !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(217, 190, 134, 0.38) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

:where(html.qms-theme) .q-lead-consent-label:hover {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(217, 190, 134, 0.7) !important;
  box-shadow: 0 2px 8px rgba(15, 41, 30, 0.06);
}

:where(html.qms-theme) .q-lead-consent-label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px !important;
  accent-color: #0C2E1B !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

:where(html.qms-theme) .q-lead-success-view {
  text-align: center;
  padding: 10px 4px;
}

:where(html.qms-theme) .q-lead-success-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(82, 183, 136, 0.22);
  color: #0C2E1B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 26px;
  border: 2px solid #52B788;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(82, 183, 136, 0.20);
}

:where(html.qms-theme) .q-lead-success-title {
  font-family: var(--qms-font-display, inherit);
  font-size: 24px;
  color: #0C2E1B;
  margin-bottom: 8px;
  font-weight: 600;
}

:where(html.qms-theme) .q-lead-success-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #3F5247;
  margin-bottom: 22px;
}

:where(html.qms-theme) .q-lead-success-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Responsive adjustments for Welcome Cinema and Mobile Header */
:where(html.qms-theme) .q-welcome-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

:where(html.qms-theme) .q-welcome-title {
  box-sizing: border-box;
  width: 100%;
}

:where(html.qms-theme) .q-welcome-tagline {
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 767px) {
  :where(html.qms-theme) .q-orbit {
    display: none;
  }
  :where(html.qms-theme) .q-welcome-cinema {
    padding: 2.25rem 1rem 4.5rem;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
  }
  :where(html.qms-theme) .q-welcome-content {
    width: 100%;
    max-width: 100%;
    padding-inline: 6px;
  }
  :where(html.qms-theme) .q-welcome-title {
    font-size: clamp(1.45rem, 6.6vw, 2.1rem);
    margin-bottom: 12px;
    text-wrap: balance;
  }
  :where(html.qms-theme) .q-welcome-eyebrow {
    font-size: 10.5px;
    padding: 5px 12px;
    margin-bottom: 14px;
    letter-spacing: 0.06em;
  }
  :where(html.qms-theme) .q-welcome-tagline {
    font-size: 0.90rem;
    line-height: 1.5;
    margin-bottom: 22px;
    padding-inline: 4px;
    text-wrap: balance;
  }
  :where(html.qms-theme) .q-welcome-scroll-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  :where(html.qms-theme) .q-phone-link {
    padding: 8px 10px;
  }
  :where(html.qms-theme) .q-phone-number {
    display: none;
  }
}

:where(html.qms-theme) .q-lead-trigger-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(217, 190, 134, 0.12);
  border: 1px solid rgba(217, 190, 134, 0.35);
  color: #D9BE86;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  text-decoration: none;
}
:where(html.qms-theme) .q-lead-trigger-pill:hover {
  background: rgba(217, 190, 134, 0.22);
  border-color: #D9BE86;
  color: #FAF9F5;
  transform: translateY(-1px);
}

:where(html.qms-theme) .q-welcome-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

:where(html.qms-theme) .q-welcome-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 9999px;
  background: rgba(250, 249, 245, 0.12);
  border: 1px solid rgba(217, 190, 134, 0.45);
  color: #FAF9F5;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s ease;
  font-family: inherit;
  text-decoration: none;
}

:where(html.qms-theme) .q-welcome-guide-btn:hover {
  background: rgba(217, 190, 134, 0.25);
  border-color: #D9BE86;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

:where(html.qms-theme) .q-welcome-guide-btn svg {
  color: #D9BE86;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

:where(html.qms-theme) .q-welcome-guide-btn:hover svg {
  transform: translateY(2px);
}

/* Selector Interactivo de Idioma de la Guía Médica (PDF) */
:where(html.qms-theme) .q-lead-lang-picker {
  margin: 10px 0 14px;
  text-align: left;
}

:where(html.qms-theme) .q-lead-lang-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

:where(html.qms-theme) .q-lead-lang-title {
  font-size: 13px;
  font-weight: 600;
  color: #0F291E;
}

:where(html.qms-theme) .q-lead-lang-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

:where(html.qms-theme) .q-lead-pdf-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* objetivo táctil mínimo (decisión 7 del dueño, 16 oct 2026; antes ≈ 40 px) */
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(15, 41, 30, 0.16);
  color: #384A40;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:where(html.qms-theme) .q-lead-pdf-lang-btn:hover {
  background: rgba(255, 255, 255, 0.90);
  border-color: #0F291E;
}

:where(html.qms-theme) .q-lead-pdf-lang-btn.active {
  background: #0F291E;
  color: #D9BE86;
  border-color: #D9BE86;
  box-shadow: 0 3px 10px rgba(15, 41, 30, 0.25);
}

:where(html.qms-theme) .q-lead-pdf-lang-btn .q-pdf-lang-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

/* Enlace legal del pie de página destacado estilo píldora de alto contraste */
:where(html.qms-theme) .q-footer-legal-links a,
:where(html.qms-theme) .q-legal-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(217, 190, 134, 0.18) !important;
  border: 1.5px solid #D9BE86 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

:where(html.qms-theme) .q-footer-legal-links a:hover,
:where(html.qms-theme) .q-legal-pill:hover {
  background: #D9BE86 !important;
  color: #0F1E16 !important;
  border-color: #D9BE86 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(217, 190, 134, 0.45) !important;
}

:where(html.qms-theme) .q-footer-legal-links span[aria-hidden="true"] {
  display: none !important;
}

/* --- Revision 2026-09-16 --- */

/* R1-01: centrado cuando cabe; alineado arriba y desplazable cuando no. */
:where(html.qms-theme) .q-lead-modal-dialog { margin: auto; }
@media (max-width: 560px) {
  :where(html.qms-theme) .q-lead-modal-backdrop { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  :where(html.qms-theme) .q-lead-modal-dialog { padding: 40px 20px 24px; border-radius: 18px; }
}

/* R1-10: el anillo de foco sigue a la superficie del tema. */
:where(html.qms-theme) :is(.qms-light, .qms-light-2, .qms-card) { --q-focus-ring: #113F25; }
:where(html.qms-theme) :is(.qms-deep, .qms-card--dark) { --q-focus-ring: #D9BE86; }

/* R1-11: hueco para la barra fija movil al final de la pagina. */
@media (max-width: 767px) {
  :where(html.qms-theme) .q-footer.qms-section { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Detalles pedidos por el dueno el 16 sep 2026 (tarde), sobre sus capturas:
   1) preguntas frecuentes mas compactas y con margen interior;
   2) etiqueta blanca bajo la foto de Onel;
   3) titulos de tarjeta en Georgia, mas oscuros.
   Nada mas del acabado "Direccion 03": el dueno pidio dejar el resto como estaba.
   ========================================================================== */
:where(html.qms-theme) .q-faq-item {
  padding: 4px 28px;
  margin-bottom: 14px;
  border-radius: 18px;
}
:where(html.qms-theme) .q-faq-item:last-child { margin-bottom: 0; }
:where(html.qms-theme) .q-faq-trigger { padding: 20px 0; gap: 16px; }
:where(html.qms-theme) .q-faq-item.is-open .q-faq-content { padding-bottom: 20px; }

:where(html.qms-theme) :is(#heroFloatBadge, .q-hero-float-badge) {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 36px rgba(10, 30, 20, 0.12);
  border-radius: 18px;
}
:where(html.qms-theme) :is(#heroBadgeTitle, .q-hero-visual .q-float-badge-title) { color: #0F2A1A; font-weight: 700; }
:where(html.qms-theme) :is(#heroBadgeDesc, .q-hero-visual .q-float-badge-desc) { color: #4E6A3C; font-weight: 600; }
:where(html.qms-theme) .q-hero-float-badge .q-float-badge-icon {
  background: rgba(196, 164, 94, 0.15);
  border: 1px solid rgba(196, 164, 94, 0.4);
  border-radius: 50%;
}

:where(html.qms-theme) :is(.q-eco-title, .q-pillar-title, .q-longevity-title, .q-aesthetics-card-title, .q-step-title, .q-price-title, .q-compare-card-trad h3) {
  color: #0F2A1A;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
}
@media (max-width: 639px) {
  :where(html.qms-theme) .q-faq-item { padding: 2px 18px; }
}

/* 4) Pedido del dueno (16 sep, 17:05): los cuatro pasos de "Un camino claro" caben en una linea y
   los tres titulos de estetica no se salen de la tarjeta y quedan alineados. */
:where(html.qms-theme) .q-step-title { font-size: 1.35rem; line-height: 1.2; }
:where(html.qms-theme) .q-aesthetics-card-title { font-size: 1.3rem; line-height: 1.25; overflow-wrap: anywhere; }

/* ---- css/logo.css ---- */
/* Logo de Quintana Medical Services con TEXTO VIVO (reconstruido en vector el 10 oct 2026).
   Simbolo en SVG (oro plano #C9A24B, hoja #5E9C33, sin degradados) + QUINTANA y MEDICAL SERVICES como texto real:
   el navegador los dibuja con la misma nitidez que el resto de las palabras de la pagina.
   - QUINTANA: "QMS Logo Serif" = Tenor Sans 400 con la Q propia de cola larga (decision del dueno, 16 oct 2026; la OFL de Tenor Sans
     reserva los nombres "Tenor" y "Tenor Sans", por eso la fuente modificada se llama asi), espaciado 0, sin kerning.
     MEDICAL SERVICES: Poppins 400. Las dos OFL 1.1, licencias en fuentes/.
   - PRECARGAR las dos fuentes en cada pagina que muestre el logo (si no cargan, el texto sale en la letra de respaldo):
       dos <link rel="preload" as="font" type="font/woff2" crossorigin> en el <head>, uno por fuente
       (en la web: fonts/qms-logo-serif-400.woff2 y fonts/qms-logo-poppins-400.woff2).
     Donde no se pueda garantizar la fuente (correo, documentos, redes), usar los SVG en trazados (logo-*.svg).
   - Todo se mide con --qms-d = diametro del anillo exterior (circulo ajustado a su borde exterior). El cuadro del
     simbolo mide 1.01569 D (viewBox 0 0 512 512).
   - Apilado: ancho total (de filete a filete) 2.2458 D. Para darle un ancho W: --qms-d: calc(W / 2.2458).
     Minimo recomendado D = 96 px (MEDICAL SERVICES a 12 px).
   - Horizontal: simbolo a la izquierda; QUINTANA a 0.46 D y MEDICAL SERVICES a 0.50 de ese cuerpo, con el
     espaciado (0.1788 em) que iguala su tinta con la de QUINTANA. Ancho total 3.9165 D.
     Con el simbolo de 32 a 64 px usa simbolo-pequeno (fragmento de la barra); mas grande, el simbolo maestro.
   - Colores: clase de variante o las variables --qms-oro (anillos, tallo y nombre), --qms-hoja, --qms-nombre y --qms-desc.
       qms-logo--color             oro plano y hoja verde, sobre verde o sobre claro (como el original claro de Canva)
       qms-logo--color-hondo       un oro plano mas hondo, #A8863A (3,4:1 sobre blanco), para fondos claros
       qms-logo--color-texto-oscuro  simbolo en oro y letras en oro oscuro #8D7536 (4,4:1): tamanos pequenos sobre claro
       qms-logo--oro               una tinta oro (tambien la hoja)
       qms-logo--blanco            todo blanco
     (qms-logo--color-verde y qms-logo--color-claro se mantienen como sinonimos de qms-logo--color.)
   - Las rutas url() son relativas a este archivo. Sin JavaScript ni estilos en linea (vale con la CSP de 05-WEB/_headers).
   COPIA PARA LA WEB (NUBE-PORTADA, 16 oct 2026): el maestro es 01-MARCA/logo-final/vector-2026-10/logo.css; aqui solo cambian
   las url() de las fuentes, que apuntan a ../fonts/ (qms-logo-serif-400.woff2 y qms-logo-poppins-400.woff2, con sus OFL). */

@font-face {
  font-family: "QMS Logo Serif";
  src: url("../fonts/qms-logo-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
  unicode-range: U+0020, U+0041-005A;
}
@font-face {
  font-family: "QMS Logo Poppins";
  src: url("../fonts/qms-logo-poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
  unicode-range: U+0020, U+0041-005A;
}

.qms-logo {
  --qms-d: 160px;
  --qms-oro: #C9A24B;
  --qms-hoja: #5E9C33;
  --qms-nombre: var(--qms-oro);
  --qms-desc: var(--qms-oro);
  --qms-px: 1px;                     /* un pixel del dispositivo en px CSS (lo ajustan las reglas de resolucion de abajo) */
  display: inline-flex;
  color: var(--qms-nombre);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  text-rendering: auto;
  text-transform: none;
  letter-spacing: 0;
  word-spacing: 0;
  -webkit-text-size-adjust: 100%;    /* el texto y el simbolo escalan juntos: sin inflado de texto en iOS ni en Android */
  text-size-adjust: 100%;
}
/* Variantes de color */
.qms-logo--color, .qms-logo--color-verde, .qms-logo--color-claro { }
.qms-logo--color-hondo { --qms-oro: #A8863A; }
.qms-logo--color-texto-oscuro { --qms-nombre: #8D7536; --qms-desc: #8D7536; }
.qms-logo--oro { --qms-hoja: var(--qms-oro); }
.qms-logo--blanco { --qms-oro: #FFFFFF; --qms-hoja: #FFFFFF; }

.qms-logo__simbolo {
  display: block;
  flex: none;
  width: calc(var(--qms-d) * 1.01569);
  height: calc(var(--qms-d) * 1.01569);
  fill: var(--qms-oro);
  overflow: visible;
  shape-rendering: geometricPrecision;   /* antialias de precisión en los anillos finos (NUBE-FAVICON parte B, 18 oct 2026) */
}
.qms-logo__hoja { fill: var(--qms-hoja); }
/* Respaldo sin serifas (Tenor Sans y Poppins lo son): si la fuente no llegara, nunca sale en Times */
.qms-logo__nombre { display: block; font-family: "QMS Logo Serif", "Tenor Sans", Optima, Candara, "Segoe UI", sans-serif; font-weight: 400; }
.qms-logo__desc { font-family: "QMS Logo Poppins", Poppins, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 400; color: var(--qms-desc); }

/* ---- Apilado: simbolo, QUINTANA y, debajo, MEDICAL SERVICES entre dos filetes ---- */
.qms-logo--apilado { flex-direction: column; align-items: center; }
.qms-logo--apilado .qms-logo__nombre {
  font-size: calc(var(--qms-d) * 0.3621);
  margin-top: calc(var(--qms-d) * 0.15849 - 0.135em);   /* 0.1667 D del pie del anillo a la cabeza de la mayuscula */
}
.qms-logo--apilado .qms-logo__desc {
  display: flex;
  align-items: center;
  font-size: calc(var(--qms-d) * 0.1250);
  margin-top: calc(var(--qms-d) * 0.07435 - 0.153em);   /* 0.1341 D de la linea base de QUINTANA a la cabeza de MEDICAL */
}
.qms-logo--apilado .qms-logo__desc > span { letter-spacing: 0.15em; margin-right: -0.15em; }
.qms-logo--apilado .qms-logo__desc::before,
.qms-logo--apilado .qms-logo__desc::after {
  content: "";
  flex: none;
  width: 2.47em;
  height: max(1px, 0.067em);
  background: currentColor;
}
.qms-logo--apilado .qms-logo__desc::before { margin-right: 0.890em; }  /* 0,967 em de la tinta de la M */
.qms-logo--apilado .qms-logo__desc::after { margin-left: 0.910em; }   /* 0,967 em de la tinta de la S */
/* Filetes con un numero entero de pixeles del dispositivo (a 1,25 y 1,5 de densidad no quedan filas a medias de grosor) */
@media (min-resolution: 1.25dppx) { .qms-logo { --qms-px: 0.8px; } }
@media (min-resolution: 1.5dppx) { .qms-logo { --qms-px: 0.66667px; } }
@media (min-resolution: 2dppx) { .qms-logo { --qms-px: 0.5px; } }
@media (min-resolution: 3dppx) { .qms-logo { --qms-px: 0.33333px; } }
@supports (height: round(nearest, 1px, 1px)) {
  .qms-logo--apilado .qms-logo__desc::before,
  .qms-logo--apilado .qms-logo__desc::after { height: max(var(--qms-px), round(nearest, 0.067em, var(--qms-px))); }
}

/* ---- Horizontal: simbolo a la izquierda; QUINTANA y MEDICAL SERVICES a la derecha, misma anchura de tinta ---- */
.qms-logo--horizontal { flex-direction: row; align-items: center; }
.qms-logo--horizontal .qms-logo__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: calc(var(--qms-d) * 0.25262);   /* 0.26 D del borde del anillo a la tinta de la Q */
  font-size: calc(var(--qms-d) * 0.4600);
}
.qms-logo--horizontal .qms-logo__nombre { margin: -0.135em 0 -0.165em -0.065em; }   /* caja = de la cabeza de la mayuscula a la linea base; tinta de la Q al borde */
.qms-logo--horizontal .qms-logo__desc {
  display: block;
  font-size: 0.5000em;
  letter-spacing: 0.1788em;
  margin: calc(var(--qms-d) * 0.13800 - 0.153em) -0.1788em -0.15em -0.077em;
}

/* Colocacion vertical exacta donde se puede recortar la caja del texto a la mayuscula y la linea base
   (Chrome y Edge 133+, Safari 18.2+). Las reglas de arriba son el respaldo (Firefox y navegadores anteriores). */
@supports (text-box: trim-both cap alphabetic) {
  .qms-logo__nombre, .qms-logo--apilado .qms-logo__desc > span, .qms-logo--horizontal .qms-logo__desc { text-box: trim-both cap alphabetic; }
  .qms-logo--apilado .qms-logo__nombre { margin-top: calc(var(--qms-d) * 0.15849); }
  .qms-logo--apilado .qms-logo__desc { margin-top: calc(var(--qms-d) * 0.13410); }
  .qms-logo--horizontal .qms-logo__nombre { margin: 0 0 0 -0.065em; }
  .qms-logo--horizontal .qms-logo__desc { margin: calc(var(--qms-d) * 0.13800) -0.1788em 0 -0.077em; }
}

/* ---- css/estetica-pagina.css ---- */
/* ============================================================
   estetica-pagina.css — estética D, «la página que se curva» (cabecera de la sección de estética)
   Portada de la sección #estetica-pagina del prototipo (plantilla.html v25) a 05-WEB con los cambios de
   ESTETICA-D-WEB.md §5 y el sitio A2 (DECISIONS «2026-10-16», decisión 5): cabecera de #aesthetics, fijada
   desde 768 px y suelta en los teléfonos. Tarea NUBE-ANDAMIAJE (16 oct 2026). Ninguna página la enlaza
   todavía: la enlaza NUBE-PORTADA desde index.html, después de qms-theme.css y antes de cristal.css.
   Guion: js/estetica-pagina.js (se engancha a [data-pagina-curva]; las clases siguen siendo pg-*).
   Cambios respecto al prototipo:
   - --pg-cabecera: alto de la cabecera fija (77 px en el teléfono, 89 desde 768 px, los de la web de hoy;
     el guion lo mide en la cabecera real de la página y lo escribe en la sección, así vale también con la
     barra de cristal de 78/64 px de la portada nueva).
   - Teléfonos (< 768 px): sin pantalla fijada. Texto primero y, debajo, la tarjeta, que se queda pegada bajo
     la cabecera (sticky corto, ESTETICA-D-WEB.md §3, condición 1) mientras pasa un recorrido de
     --pg-recorrido (60 svh, 450 px como mínimo); el guion mide el progreso en ese recorrido. La oreja de
     página ocurre con la tarjeta entera a la vista y el final antes de que pase bajo la cabecera, porque
     nunca pasa. Mientras está pegada, el guion pone html.pg-fijada (desde NUBE-PULIDO-MOVIL la barra inferior ya no
     se aparta: la tarjeta va centrada entre las dos barras, al final de este archivo).
   - Las imágenes son las mismas 12 (img/estetica-pagina-*, NUBE-MEDIOS); los LQIP data: siguen aquí.
   Antes/después simulado con IA: excepción a la regla 4 solo para img/estetica-pagina-*, con el aviso en la
   política de privacidad (NUBE-PORTADA, claves priv.*).
   ============================================================ */
/* Estética, opción D: «página que se curva» (#estetica-pagina). SOLO DEL PROTOTIPO (antes/después simulado con IA, regla 4). Va después de las reglas de .marfil (las sobrescribe). Prefijo pg-.
   La sección mide 100svh + 190svh de recorrido; el contenido queda fijo con position: sticky mientras la hoja impresa se curva (guion «opción D» al final de la página).
   Mismo encaje que la sección de estética del prototipo: texto a la izquierda y retrato en tarjeta a la derecha (escritorio), retrato arriba (móvil).
   Fondo marfil luminoso (el color medido del fondo de los retratos) y sombra de tarjeta suave. Arriba, el filete dorado de .marfil, como las demás secciones.
   En reposo en los extremos se ven las <img> nativas (papel o joven), no el lienzo: clases pg-nativa / pg-nativa-papel.
   Origen de las imágenes y herramientas: 10-PROPUESTAS/web-cristal-2026-10/estetica-pagina/LEEME.md */
.pg{--pg-fondo:#FCF6EA;--pg-cabecera:77px;--pg-cab:calc(var(--pg-cabecera) + env(safe-area-inset-top,0px));--pg-aire:clamp(14px,4.5svh,44px);--pg-alto:min(80svh,780px,calc(100svh - var(--pg-cab) - 2 * var(--pg-aire)));position:relative;height:290vh;height:290svh;padding-block:0}
/* .marfil pone overflow:hidden, que anularía el sticky. El fondo de la sección se queda en el marfil de .marfil (#F3EEE3), el color en que acaba
   el degradado inferior de .pg-fijo: si el navegador del móvil recoge su barra (100lvh > 100svh), lo que asoma bajo la pantalla fijada es del
   mismo color, sin escalón. En las variantes estáticas (movimiento reducido, sin JS) el fondo es --pg-fondo (más abajo) */
.marfil.pg{overflow:visible}
.pg-fijo{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;padding-top:var(--pg-cab);display:grid;align-content:center;overflow:hidden;background:linear-gradient(180deg,#F5EEDF 0%,#F6EFE0 11%,#FBF5E8 34%,#FCF6EA 46%,#FDF7EB 100%)}
.pg-fijo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(180deg,rgba(243,238,227,0),#F3EEE3);pointer-events:none;z-index:0}
.pg-rejilla{display:grid;grid-template-columns:minmax(0,600px) auto;justify-content:space-between;align-items:center;gap:clamp(32px,4.5vw,72px)}
.pg-texto{margin-bottom:0;gap:20px;max-width:600px}
.pg-texto .lead{text-wrap:pretty}
.pg-texto .cejilla{text-wrap:balance;line-height:1.5;align-items:flex-start}
.pg-texto .cejilla::before{margin-top:.75em}
@media (min-width:901px){.pg-texto{container-type:inline-size}}
@supports (font-size:1cqi){@media (min-width:901px){.pg-texto h2{font-size:clamp(1.6rem,7.1cqi,3.1rem)}}}
.pg-lamina{position:relative;width:min(calc(var(--pg-alto) * .8056),54vw);aspect-ratio:1856/2304;border-radius:28px;box-shadow:0 60px 100px -60px rgba(74,52,24,.42),0 22px 46px -30px rgba(74,52,24,.26),0 0 0 1px rgba(176,138,58,.10)}
/* LQIP: la hoja impresa a 32×40 para que el marco nunca se vea vacío mientras cargan las fotos */
.pg-marco{position:absolute;inset:0;border-radius:inherit;overflow:hidden;clip-path:inset(0 round 28px);background:#ECEAE6 url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAoACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAUGBAP/xAAqEAACAQMCBAUFAQAAAAAAAAABAgMABBEFIQYSEzEjQVFhcQciMpGxFP/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFREBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhEDEQA/AH3F91OlnBYWjmOS9co0g7ogGWx7nIFLLLhmwSLHRDE9yxzmmHFvgy2d0eXCB0HNnGTg+XxWe01OSfTmnhiCum2DuD7j1FRUtxJw+LUGe1X7B3X0qn+nurS3+lyWdwxaS0wFYncoewPxjH6rO9wb+J4ZY5efBDkx4U/FZvp9F/k1vUYGzgryKcd8HP8AKCq4hjV4LcyKGQS7+xI2pRDcKJpIY4pGcOOybYx61S6lbG70+aBfyYZX5G4qPtEuWeQGWZcN+JYLy+2MUDS7mjjtzyKFOO3pXXhmxeEPdSJy9XJBI3bPn+qUXU6xL0y3UlbYAnJNVumEHTLYg58Jf5Qdpp4reMyTSKiDzY1B67qRvtZ6lj1ETkCMTtzEE70UUo02FkqeK/3OfM7mm2n3M9knIAHiyTyHy+DRRUH/2Q==") 50% 50%/cover no-repeat;isolation:isolate}
@supports (width:round(down,10.5px,1px)){.pg-lamina{--pg-ancho:round(down,min(calc(var(--pg-alto) * .8056),54vw),1px);width:var(--pg-ancho);height:round(calc(var(--pg-ancho) * 1.24138),1px);aspect-ratio:auto}} /* tamaño entero: el lienzo y la <img> comparten el mismo rectángulo */
.pg-marco::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(110,87,38,.08),inset 0 1px 0 rgba(255,255,255,.5);pointer-events:none;z-index:3}
/* Aviso visible de que los retratos son una simulación hecha con IA (dueño, 23 oct 2026, tarea AVISO-IA-ESTETICA; FTC: el aviso, junto a lo
   que aclara). Cuelga de la tarjeta (top:100%), así la sigue cuando está fijada o pegada y no cambia el encaje. --ink-2 sobre el marfil: 5,9:1 */
.pg-aviso{position:absolute;top:100%;left:0;right:0;z-index:1;margin:10px 0 0;font-size:clamp(.75rem,.7rem + .2vw,.8125rem);line-height:1.4;letter-spacing:.01em;color:var(--ink-2);text-align:center;text-wrap:balance}
.pg-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;max-width:none}
picture.pg-capa{display:block}
/* Antes de que el componente esté listo se ve la hoja impresa (la historia empieza por ahí); la joven, debajo, no se enseña hasta entonces */
.pg-joven{opacity:0}
.pg.pg-lista .pg-joven{opacity:1}
.pg-papel-capa{z-index:1}
.pg-papel{will-change:clip-path}                 /* respaldo sin WebGL: clip-path sin filtros */
.pg-lienzo{z-index:2;opacity:0;pointer-events:none}
.pg.pg-gl .pg-lienzo{opacity:1}
.pg.pg-gl .pg-papel-capa{visibility:hidden}
.pg.pg-gl.pg-nativa .pg-lienzo{opacity:0}        /* reposo en un extremo: la <img> nativa, a la resolución del dispositivo */
.pg.pg-gl.pg-nativa-papel .pg-papel-capa{visibility:visible}
/* Móvil en vertical: retrato arriba y texto debajo, todo dentro de la pantalla fijada (bajo la cabecera). --pg-tope lo pone el guion
   (encajar): el alto que queda para la tarjeta cuando el texto (más largo en inglés) ya está colocado; así nada se recorta en ningún alto
   de pantalla ni idioma. Sin guion no hay pantalla fijada (variante estática) y no hace falta */
@media (max-width:900px) and (orientation:portrait){
  .pg{--pg-alto:min(55svh,calc((100vw - 32px) * 1.2414),var(--pg-tope,100vh))} /* 55svh: en 400×800 el lead ya no toca el borde (en 390×844 manda el ancho) */
  .pg-fijo{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:calc(var(--pg-cab) + 36px) 0 24px;background:linear-gradient(180deg,#F6EFE0 0%,#F7F0E2 12%,#FCF6EA 36%,#FDF7EB 100%)}
  .pg-rejilla{display:flex;flex-direction:column;gap:30px;align-items:center}
  .pg-lamina{order:-1;width:calc(var(--pg-alto) * .8056);flex:none;border-radius:24px}
  .pg-marco{clip-path:inset(0 round 24px)}
  .pg-texto{gap:12px;width:100%;max-width:560px}
  .pg-texto h2{font-size:clamp(1.5rem,6.6vw,2rem)}
  .pg-texto .lead{font-size:.95rem;line-height:1.6}
  @supports (width:round(down,10.5px,1px)){.pg-lamina{--pg-ancho:round(down,calc(var(--pg-alto) * .8056),1px)}}
}
@media (max-width:900px) and (orientation:portrait) and (max-height:720px){
  .pg{--pg-alto:min(47svh,calc((100vw - 32px) * 1.2414),var(--pg-tope,100vh))}
  .pg-fijo{padding-top:calc(var(--pg-cab) + 18px)}
  .pg-rejilla{gap:20px}
  .pg-texto{gap:9px}
  .pg-texto .lead{font-size:.9rem;line-height:1.5}
}
/* Teléfonos bajos (iPhone SE en Safari con las barras: 375×548; Android de 360×640 con las del navegador: 360×560; 320×568): menos aire y
   texto un punto más pequeño, para que la tarjeta no tenga que encogerse tanto */
@media (max-width:900px) and (orientation:portrait) and (max-height:620px){
  .pg-fijo{padding-top:calc(var(--pg-cab) + 12px);padding-bottom:16px}
  .pg-rejilla{gap:14px}
  .pg-texto{gap:7px}
  .pg-texto h2{font-size:clamp(1.3rem,5.8vw,1.6rem)}
  .pg-texto .lead{font-size:.86rem;line-height:1.45}
}
/* Tableta en vertical: tarjeta algo mayor y el conjunto centrado en el alto (si no cabe, «safe» lo deja arriba, bajo la cabecera) */
@media (max-width:900px) and (orientation:portrait) and (min-width:600px){
  .pg{--pg-alto:min(60svh,calc((100vw - 32px) * 1.2414),var(--pg-tope,100vh))}
  .pg-fijo{justify-content:safe center}
}
/* Teléfono apaisado: dos columnas, como en escritorio */
@media (max-width:900px) and (orientation:landscape){
  .pg-rejilla{gap:24px}
  .pg-texto h2{font-size:clamp(1.3rem,3.2vw,1.9rem)}
  .pg-texto .lead{font-size:.88rem}
}
/* Fusión con la v25 (barra inferior del móvil y botón de WhatsApp, por debajo de 768 px): mientras esta pantalla está fijada, la barra se apartaba
   y el WhatsApp bajaba a su fila de abajo, como en el héroe (ya no: NUBE-PULIDO-MOVIL, al final de este archivo) (clase pg-fijada en <html>, la pone el guion de D; reglas junto a las de heroe-fijado).
   El texto deja libre esa fila (24 px del borde + 42 del botón + 8 de aire); encajar() lo tiene en cuenta y encoge la tarjeta lo justo */
@media (max-width:767px) and (orientation:portrait) and (min-height:481px){
  .pg-fijo{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
/* Movimiento reducido y sin JS: sin tramo fijado ni animación; solo la piel joven, estática (con movimiento reducido la hoja impresa no se
   descarga: <source> de movimiento reducido). El LQIP del marco es entonces el de la joven */
@media (prefers-reduced-motion:reduce){
  .pg{height:auto;padding-block:clamp(72px,10vw,140px) clamp(96px,11vw,150px)}
  .marfil.pg{background:var(--pg-fondo)}
  .pg-fijo{position:relative;height:auto;padding-top:0;padding-bottom:24px;background:none;overflow:visible} /* sin recorte: la sombra de la tarjeta (≈100 px) se ve entera */
  .pg-fijo::after{display:none}
  .pg .pg-papel-capa,.pg .pg-lienzo,.pg .pg-banda{display:none}
  .pg-joven{opacity:1}
  .pg-marco{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAoACADASIAAhEBAxEB/8QAGgAAAwADAQAAAAAAAAAAAAAAAAUGAQMEB//EACwQAAEDAwIEBQQDAAAAAAAAAAECAxEABAUSIQYxQXEHIjJhkRMjUbGBoeH/xAAYAQADAQEAAAAAAAAAAAAAAAABAgMEAP/EABwRAAIDAQEBAQAAAAAAAAAAAAABAgMRIWExQf/aAAwDAQACEQMRAD8Ao+NLq5RZ2+Os1lt2/WULdHNDYEqj3MgfzSvH8KY1DWkMBZPMrMzTLjAFh6yvDo0oC0DVMSYPTfoa02OUcuMaq4YbSHE7RBUD7j8is8298NNcVnpG8V8MptEquLNPkT6kzy/yqnw0zTuRxDtjcqK3bIgJWTJKDMA9ojtFYW8rJNOMOtvagCFlTWlJ7Uu8NmDZZ/K26piAhJjnBn9U0JasYtkMeos+IW0qZti4gKbDsGehI2pQzcpS+4w206pYcHpR5QmOc1SZO1N5jnmE+tQlPcbio+ybulOOJLrySFGUlYTp9oikmulKXqwb3z6W7ZUCDHKs8LWC2Q5duN6S7JBI3VPX4/dKL24S0gM6i46rYAmSarsUQrFWpBB+0n5ihDrOteRw3vvs2zZcfcS2gdVGvPc/lFX+b+pjy423oDa521EE7/3RRRm/wWqK+nZj7FCAXV+Zw8ydzTbHXL9inQkBxqSdB6djRRUk86Wkk+M//9k=")}
}
@media (scripting:none){
  .pg{height:auto;padding-block:clamp(72px,10vw,140px) clamp(96px,11vw,150px)}
  .marfil.pg{background:var(--pg-fondo)}
  .pg-fijo{position:relative;height:auto;padding-top:0;padding-bottom:24px;background:none;overflow:visible} /* sin recorte: la sombra de la tarjeta (≈100 px) se ve entera */
  .pg-fijo::after{display:none}
  .pg .pg-papel-capa,.pg .pg-lienzo,.pg .pg-banda{display:none}
  .pg-joven{opacity:1}
  .pg-marco{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAoACADASIAAhEBAxEB/8QAGgAAAwADAQAAAAAAAAAAAAAAAAUGAQMEB//EACwQAAEDAwIEBQQDAAAAAAAAAAECAxEABAUSIQYxQXEHIjJhkRMjUbGBoeH/xAAYAQADAQEAAAAAAAAAAAAAAAABAgMEAP/EABwRAAIDAQEBAQAAAAAAAAAAAAABAgMRIWExQf/aAAwDAQACEQMRAD8Ao+NLq5RZ2+Os1lt2/WULdHNDYEqj3MgfzSvH8KY1DWkMBZPMrMzTLjAFh6yvDo0oC0DVMSYPTfoa02OUcuMaq4YbSHE7RBUD7j8is8298NNcVnpG8V8MptEquLNPkT6kzy/yqnw0zTuRxDtjcqK3bIgJWTJKDMA9ojtFYW8rJNOMOtvagCFlTWlJ7Uu8NmDZZ/K26piAhJjnBn9U0JasYtkMeos+IW0qZti4gKbDsGehI2pQzcpS+4w206pYcHpR5QmOc1SZO1N5jnmE+tQlPcbio+ybulOOJLrySFGUlYTp9oikmulKXqwb3z6W7ZUCDHKs8LWC2Q5duN6S7JBI3VPX4/dKL24S0gM6i46rYAmSarsUQrFWpBB+0n5ihDrOteRw3vvs2zZcfcS2gdVGvPc/lFX+b+pjy423oDa521EE7/3RRRm/wWqK+nZj7FCAXV+Zw8ydzTbHXL9inQkBxqSdB6djRRUk86Wkk+M//9k=")}
}


/* ---- Sitio A2 en los teléfonos (< 768 px): suelta. Texto antes que la tarjeta; la tarjeta se pega bajo la cabecera un
   recorrido corto (el guion lee el progreso de ese recorrido: 0 cuando la tarjeta llega a su sitio bajo la cabecera, 1 al
   acabar el recorrido). Estas reglas van después de las de «(max-width:900px) and (orientation:portrait)» y las
   sustituyen por debajo de 768 px ---- */
@media (max-width:767px){
  .pg{--pg-recorrido:max(450px,60svh);--pg-alto:min(45svh,calc((100vw - 32px) * 1.2414));height:auto;padding-block:clamp(56px,9vw,96px) clamp(40px,6vw,64px)}
  .marfil.pg{background:var(--pg-fondo)}
  .pg-fijo{position:relative;height:auto;padding:0;display:block;overflow:visible;background:none}
  .pg-fijo::after{display:none}
  .pg-rejilla{display:flex;flex-direction:column;align-items:center;gap:26px}
  .pg-rejilla::after{content:"";display:block;flex:none;width:100%;height:var(--pg-recorrido)}
  .pg-texto{order:0;gap:12px;width:100%;max-width:560px}
  .pg-lamina{order:0;position:sticky;position:-webkit-sticky;top:calc(var(--pg-cab) + 12px);width:calc(var(--pg-alto) * .8056);flex:none;border-radius:24px}
  .pg-marco{clip-path:inset(0 round 24px)}
  @supports (width:round(down,10.5px,1px)){.pg-lamina{--pg-ancho:round(down,calc(var(--pg-alto) * .8056),1px)}}
}
@media (max-width:767px) and (max-height:620px){
  .pg{--pg-alto:min(40svh,calc((100vw - 32px) * 1.2414))}
}
@media (min-width:768px){
  .pg{--pg-cabecera:89px}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.pg-lamina{position:relative}.pg-rejilla::after{display:none}.marfil.pg{padding-bottom:calc(clamp(40px,6vw,64px) + 124px)}}
/* NUBE-PORTADA, accesibilidad A1 (17 oct): relative y no static, para que las capas absolutas del retrato se midan contra la lámina y no tapen la cabecera de #aesthetics */
@media (max-width:767px) and (scripting:none){.pg-lamina{position:relative}.pg-rejilla::after{display:none}.marfil.pg{padding-bottom:calc(clamp(40px,6vw,64px) + 124px)}}
/* NUBE-PROPUESTAS, retoque A (22 oct 2026): en el teléfono con movimiento reducido o sin JS el pie del retrato sobresalía 17 px de la
   sección y la cinta lo tapaba; 80 px más de aire abajo en esos dos modos deja unos 30 px entre el retrato y la cinta; con movimiento normal no cambia nada
   AVISO-IA-ESTETICA (23 oct 2026): 124 px y no 80, para que quepa debajo la línea del aviso (hasta 3 líneas a 320 px) sin tocar la cinta */

/* ---- SEDA (dueño, 17 oct 2026, DECISIONS «2026-10-17 (5)»; tarea NUBE-PORTADA-SEDA) ----
   #aesthetics lleva el mismo material que #comparison: marfil #F3EEE3 con la imagen de seda de su .tras
   (img/cristal-fondo-claro.jpg, con la misma URL con huella que el <img> de #comparison: una sola descarga; si la imagen cambia,
   hay que poner aquí la huella nueva o se bajará dos veces), al 92 %, bajo el mismo velo marfil y con orbes de luz quietos.
   Sin costura (segundo paso, 17 oct): una sola imagen, derecha, anclada a la unión de #comparison y #aesthetics, con la misma
   escala (--seda-h de alto, la de la imagen de #comparison) y el mismo origen a los dos lados: su pie queda --seda-pie por
   debajo de la unión, de modo que la unión cae en la parte lisa de la seda y la ola sube en #aesthetics hacia la cinta.
   Arriba, el ::after de #comparison pinta los --seda-t de abajo y se funde hacia arriba con su imagen de siempre (que lleva
   paralaje y no puede casar con nada quieto). La fila de un lado y la del otro son filas seguidas de la misma imagen, a
   cualquier ancho; sin volteo no hay eje de reflejo que se vea (con la imagen volteada, las líneas de la ola dibujaban un «>»).
   Sin animación ni JS: vale igual con movimiento reducido, sin JS y sin WebGL.
   Encima, un velo marfil #FCF6EA de bordes muy suaves detrás de la cabecera y de la lámina (halo radial) para que la hoja
   siga leyéndose como papel claro y los textos conserven el contraste; fuera del halo, la seda a la vista.
   Dónde va la capa: con la escena fijada (escritorio con JS y movimiento normal), en el ::before de .pg-fijo y en el relleno
   de arriba y de abajo de la sección (ver más abajo). En el teléfono, con movimiento reducido o sin JS, .pg-fijo no pinta fondo
   y la seda va en el ::before de la propia sección. */
#comparison,.pg{--pg-p:clamp(72px,10vw,140px);--pg-caja:calc(2 * var(--pg-p) + 100vh);--pg-caja:calc(2 * var(--pg-p) + 100svh);--pg-caja1:calc(var(--pg-caja) + 1px);
  --seda-t:700px;--seda-pie:var(--pg-caja);--seda-h:max(2100px,calc(var(--seda-pie) + var(--seda-t)),calc(100vw * 1451 / 2600));
  --seda-foto:url(../img/cristal-fondo-claro.jpg?v=00492a400f);
  --seda-92:linear-gradient(rgba(243,238,227,.08),rgba(243,238,227,.08))} /* --seda-h: 2100 px, la escala de la imagen de #comparison (2050–2150 px de alto: cover sobre el 128 % de la sección); crece si hace falta para cubrir de --seda-t por encima de la unión a --seda-pie por debajo, y el ancho. --seda-pie: la caja de la escena (la ola, en la mitad de abajo de la pantalla fijada) */
@media (max-width:767px) and (prefers-reduced-motion:no-preference) and (scripting:enabled){#comparison,.pg{--seda-pie:max(var(--pg-caja),1500px)}} /* teléfono con la tarjeta pegada: la sección mide hasta ~1460 px (375–430 de ancho); la imagen tiene que llegar a su pie */
.pg{--pg-seda:
    radial-gradient(circle max(16vw,150px) at 12% 70%,rgba(94,156,51,.16),rgba(94,156,51,0)),
    radial-gradient(circle max(14vw,130px) at 88% 50%,rgba(201,162,75,.2),rgba(201,162,75,0)),
    radial-gradient(circle max(12vw,120px) at 42% 96%,rgba(36,86,64,.07),rgba(36,86,64,0)),
    linear-gradient(180deg,rgba(245,239,226,.66) 0%,rgba(245,239,226,.2) 26%,rgba(245,239,226,.16) 70%,rgba(245,239,226,.62) 100%),
    var(--seda-92),
    var(--seda-foto) 50% calc(var(--seda-pie) - var(--seda-h) + 1px)/auto var(--seda-h) no-repeat;
  --pg-halo:radial-gradient(closest-side,rgba(252,246,234,.7),rgba(252,246,234,.62) 48%,rgba(252,246,234,.3) 76%,rgba(252,246,234,0))}
/* la imagen se coloca desde el borde de arriba de cada caja (que en la de arriba está 1 px sobre la unión, de ahí el + 1px): su pie, a --seda-pie bajo la unión; los orbes quietos quedan lejos de la unión (del 50 % hacia abajo) para no cortarse en ella */
#comparison::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--seda-t);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,239,226,.3),rgba(245,239,226,.66)),var(--seda-92),var(--seda-foto) 50% calc(var(--seda-t) + var(--seda-pie) - var(--seda-h))/auto var(--seda-h) no-repeat,#F3EEE3;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60%);mask-image:linear-gradient(180deg,transparent 0,#000 60%)} /* sobre .tras (z-index 0, antes en el árbol) y bajo .contenedor (1): opaca en los 280 px de abajo, fundida en los 420 de encima; la imagen, en el mismo sitio que en #aesthetics (su pie, --seda-pie bajo la unión); el velo llega a la unión en el mismo .66 con que empieza el de #aesthetics */
.marfil.pg{border-top:0} /* sin el filete dorado de .marfil entre #comparison y #aesthetics (1 px menos de alto; estetica-pagina.js mide la sección entera) */
/* Escena fijada: .seccion (cristal.css) le da a la sección un relleno de clamp(72px,10vw,140px) arriba y abajo, que queda fuera de .pg-fijo.
   Para que no haya franja lisa ahí, la seda se pinta en tres cajas iguales de 2 rellenos + una pantalla: al principio y al final de la
   sección (::before y ::after) y en .pg-fijo, desbordando un relleno por arriba y por abajo (lo recorta su overflow). Con la escena en
   reposo al principio o al final, las cajas coinciden píxel a píxel; mientras está fijada, solo se ve .pg-fijo. La de arriba empieza
   1 px por encima de la unión (--pg-caja1 = la caja + ese píxel): la unión cae a menudo en fracción de píxel (a 768 px, 450,4) y
   así la fila del borde la pinta entera #aesthetics, encima de #comparison */
.marfil.pg::before,.marfil.pg::after{content:"";position:absolute;left:0;right:0;height:var(--pg-caja1);z-index:-1;background:var(--pg-seda);pointer-events:none}
.marfil.pg::before{top:-1px}
.marfil.pg::after{bottom:0}
.pg-fijo{background:#F3EEE3;isolation:isolate}
.pg-fijo::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--pg-p) - 1px);height:var(--pg-caja1);z-index:-1;background:var(--pg-seda);pointer-events:none}
/* Fundido inferior: la sombra de la lámina sobresale y overflow:hidden la cortaba en recto en el borde de .pg-fijo. Encima, la misma
   seda en la misma caja (no un color), visible solo en la franja de aire de abajo: tapa el corte sin que se note la capa (z-index 2: por encima de .pg-rejilla, que lleva 1; ahí no hay contenido) */
.pg-fijo::after{display:block;top:calc(-1 * var(--pg-p) - 1px);bottom:auto;height:var(--pg-caja1);z-index:2;background:var(--pg-seda);-webkit-mask-image:linear-gradient(0deg,#000 0,#000 var(--pg-p),transparent calc(var(--pg-p) + var(--pg-aire)));mask-image:linear-gradient(0deg,#000 0,#000 var(--pg-p),transparent calc(var(--pg-p) + var(--pg-aire)))}
.pg-texto{position:relative}
.pg-texto::before,.pg-lamina::before{content:"";position:absolute;z-index:-1;background:var(--pg-halo);pointer-events:none}
.pg-texto::before{inset:-34% -22%}
.pg-lamina::before{inset:-6% -30%} /* poco por arriba y por abajo: .pg-fijo recorta lo que sobresale y el halo no debe acabar en un borde recto */
@media (max-width:767px),(prefers-reduced-motion:reduce),(scripting:none){
  .marfil.pg{background:#F3EEE3}
  .marfil.pg::before{top:-1px;bottom:0;height:auto} /* sin escena fijada: una sola capa de seda para toda la sección (también 1 px sobre la unión) */
  .marfil.pg::after{display:none}
  .pg-fijo{background:none}
  .pg-fijo::before,.pg-fijo::after{display:none}
}
@media (max-width:767px){
  .pg-texto::before{inset:-22% -12%}
  .pg-lamina::before{inset:-14% -22%}
}
/* Integración de SEDA en NUBE-PORTADA (17 oct): los halos (.pg-texto::before, .pg-lamina::before) sobresalen hasta un 30 % de su caja y en la variante estática (teléfono, movimiento reducido, sin JS) nada los recortaba: la página medía 401 px a 375. overflow-x:clip recorta sin crear contenedor de scroll (la escena fijada y el desbordamiento vertical siguen igual) */
.marfil.pg{overflow-x:clip}
/* ---- NUBE-HUECO-ESTETICA (dueño, 18 oct 2026, DECISIONS «2026-10-18 (4)»): la hoja y su texto llegan en cuanto acaba #comparison, sin la
   pantalla vacía de antes. Solo con la escena fijada (desde 768 px, con movimiento y con JS); en el teléfono, con movimiento reducido y sin
   JS no cambia nada.
   - Sin relleno arriba: .pg-fijo empieza en la unión y se fija en cuanto la unión llega arriba. La sección mide lo mismo (border-box: el
     alto de 290svh ya incluía el relleno), así que el recorrido de la hoja que mide estetica-pagina.js (alto de la sección menos la
     pantalla) y la curva no cambian: misma progresión, mismo final; solo el primer 7 % ocurre ya fijada en vez de mientras entra.
   - Las tres cajas de seda pasan de 2 rellenos + una pantalla a 1 relleno + una pantalla (el de abajo), y la de .pg-fijo empieza 1 px sobre
     su borde: a la entrada coincide con la de la sección y a la salida con la de abajo, píxel a píxel. --seda-pie sigue a --pg-caja en los
     dos lados de la unión (#comparison y .pg), así que la imagen queda donde estaba en la pantalla fijada y la unión sigue sin costura.
   - La tarjeta (retrato con la hoja impresa) sale con opacidad --pg-ver, que estetica-pagina.js lleva de 0 a 1 en los 160 px de
     desplazamiento que siguen a la salida por arriba de comparison.b.1 («Una evaluación clínica con Onel…»): condición 3 de
     ESTETICA-D-WEB.md §3 (ninguna pantalla con la cara y Onel a la vez; s. 456.072(1)(m)), que antes cumplía el aire de #comparison.
     Por defecto 0: si el guion no llega, la tarjeta no se enseña junto a esa línea */
@media (min-width:768px) and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  #comparison,.pg{--pg-caja:calc(var(--pg-p) + 100vh);--pg-caja:calc(var(--pg-p) + 100svh)}
  .marfil.pg{padding-top:0}
  .pg-fijo::before,.pg-fijo::after{top:-1px}
  .pg-lamina{opacity:var(--pg-ver,0)}
}
/* En dos columnas (desde 901 px, o apaisado desde 768), el contenido arriba con el aire justo bajo la barra, en vez de centrado en la
   pantalla: a la entrada no queda franja vacía sobre la hoja, y --pg-alto ya reserva ese aire arriba y abajo */
@media (min-width:901px) and (prefers-reduced-motion:no-preference) and (scripting:enabled),(min-width:768px) and (orientation:landscape) and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .pg-fijo{align-content:start;padding-top:calc(var(--pg-cab) + var(--pg-aire))}
}
/* ---- NUBE-PULIDO-MOVIL (22 oct 2026, NUBE-REVISION-VISUAL P1-2): en el teléfono, con la tarjeta pegada, quedaban 357–383 px de marfil vacío
   bajo ella (≈ 45 % de la pantalla) durante unos 500 px de recorrido, y la barra de abajo se apartaba sin tapar nada. Mismo criterio que
   NUBE-HUECO-ESTETICA en el escritorio, sin tocar el modo A2 (solo la tarjeta se pega, con el texto ya leído; ESTETICA-D-WEB.md §3, condición 1):
   - la tarjeta, algo mayor: 56svh en vez de 45 (con el mismo tope de ancho: a 390 y a 360 ocupa ya casi todo el ancho);
   - pegada en el centro del hueco que queda entre la barra de arriba (--pg-cab) y la de abajo (--pg-reserva: 10 + 48 + 10 px, más la zona
     segura), que ahora sigue a la vista (cristal.css), y nunca más arriba que antes (--pg-cab + 12 px).
   estetica-pagina.js lee el top real del sticky (medirPos), así que la oreja y el final siguen dentro del recorrido. Solo con movimiento y
   con JS: con movimiento reducido o sin JS la tarjeta no se pega y nada cambia (ni el retoque A de NUBE-PROPUESTAS) ---- */
@media (max-width:767px) and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .pg{--pg-reserva:calc(68px + env(safe-area-inset-bottom,0px))}
  .pg-lamina{top:max(calc(var(--pg-cab) + 12px),calc(var(--pg-cab) + (100vh - var(--pg-cab) - var(--pg-reserva) - var(--pg-alto)) / 2));top:max(calc(var(--pg-cab) + 12px),calc(var(--pg-cab) + (100svh - var(--pg-cab) - var(--pg-reserva) - var(--pg-alto)) / 2))}
}
@media (max-width:767px) and (min-height:621px) and (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .pg{--pg-alto:min(56svh,calc((100vw - 32px) * 1.2414))}
}

/* ---- css/cristal.css ---- */
/* ============================================================
   cristal.css — hoja del diseño «cristal líquido» (portada nueva)
   Portada del <style> de 10-PROPUESTAS/web-cristal-2026-10/prototipo/plantilla.html (v25) a 05-WEB
   (tarea NUBE-ANDAMIAJE, 16 oct 2026; plan en INTEGRACION-05-WEB.md §1 y §7). Todavía no la enlaza ninguna
   página: la enlaza NUBE-PORTADA desde index.html, la última de las hojas (publicar.mjs la mete en el
   bundle de la página; «cristal.css al final para que gane»).
   Qué cambia respecto al prototipo:
   - Los resets de elemento (body, img, a, button, h1–h4, p, box-sizing) van bajo :where(.q-cristal), con la
     misma especificidad de elemento que en el prototipo (así .qms-logo de logo.css sigue mandando en el color del
     logo): la página que lleve el diseño nuevo pone class="q-cristal" en <body>; una página interior puede
     enlazar esta hoja solo para la cabecera y el pie sin heredar los resets.
   - Sin el bloque del logo (logo.css lo copia NUBE-PORTADA a css/ con las fuentes en fonts/). Quedan
     las reglas de tamaño y color del logo propias de la página (.marca, .bienvenida-emblema, .intro-logo,
     .nav.sobre-claro .marca).
   - Sin el selector de mapas del prototipo (.mapas*): la web usa .q-mapas* de components.css
     (initMapaSegunDispositivo, main.js); aquí solo se le pone el cristal del diseño nuevo (al final).
   - Sin .pie-nota (ui.nota no pasa a la web) y sin la estética D (.pg*, en estetica-pagina.css).
   - Rutas relativas a css/ con los nombres finales de INTEGRACION-05-WEB.md §3 (img/cristal-*,
     img/simbolo-favicon-color.svg): los archivos los añaden NUBE-MEDIOS y NUBE-PORTADA.
   - Los 10 style="" del marcado del prototipo son clases (al final: .ratio-4-3, .ratio-21-7,
     .enfoque-*, .ficha-sede, .ancho-completo, .perfil-nombre, .svg-oculto).
   - El póster de la bienvenida (segundo <style> del prototipo) va aquí, al final; su <link rel="preload">
     va en el <head> de la página (INTEGRACION §2.4).
   ============================================================ */
:root{
  --bg:#0E1C15; --bg-2:#163428; --bg-3:#245640;
  --ink:#F5EFE2; --ink-2:rgba(245,239,226,.74); --ink-3:rgba(245,239,226,.5);
  --gold:#C9A24B; --gold-2:#E8CE8C; --gold-3:#8A6F33; --leaf:#5E9C33; --sage:#DCE5DC;
  --glass:rgba(245,239,226,.06); --glass-2:rgba(245,239,226,.11);
  --line:rgba(245,239,226,.14); --line-gold:rgba(232,206,140,.45);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --beat:.968s; --mx:50%; --my:50%; --radio:24px;
  --gutter:clamp(16px,4vw,48px); --maxw:1240px;
  --oro-tinta:#E8CE8C; --oro-borde:rgba(232,206,140,.72); --oro-fondo:rgba(14,28,21,.55); --oro-brillo:.7; /* botón de cita en cristal con borde y texto oro (v25, dueño, 9 oct noche: "la F tu propuesta me parece mejor"); sobre fondo oscuro el cristal atenúa lo que tiene detrás (brillo .7 y velo verde al 55 %) para que el oro se lea también sobre las zonas claras del vídeo de bienvenida (medido en la v25 a 768 y 390 px sobre 6 fotogramas: ≥ 5:1 en el 5 % más claro); en fondos claros se redefinen abajo */
}
:where(.q-cristal) *,:where(.q-cristal) *::before,:where(.q-cristal) *::after{box-sizing:border-box}
body:where(.q-cristal){margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(.q-cristal) img{max-width:100%;display:block}
:where(.q-cristal) a{color:inherit;text-decoration:none}
:where(.q-cristal) button{font:inherit;color:inherit}
:where(.q-cristal) :is(h1,h2,h3,h4){font-family:var(--serif);font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:0}
:where(.q-cristal) :is(h1,.como-h1){font-size:clamp(2.5rem,5.4vw,4.7rem);line-height:1.02}
:where(.q-cristal) h2{font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.1}
:where(.q-cristal) h3{font-size:1.35rem;line-height:1.25}
:where(.q-cristal) h4{font-size:1.05rem;color:var(--gold-2);margin-bottom:10px}
:where(.q-cristal) p{margin:0}
body:where(.q-cristal){color-scheme:dark}
.contenedor{width:min(var(--maxw),100% - 2*var(--gutter));margin-inline:auto;position:relative;z-index:1}
.seccion{padding-block:clamp(72px,10vw,140px);position:relative}
.seccion-ajustada{padding-block:clamp(28px,4vw,56px)}
.cejilla{font:600 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);display:inline-flex;gap:12px;align-items:center}
.cejilla::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.lead{color:var(--ink-2);font-size:clamp(1.02rem,1.35vw,1.22rem);max-width:62ch;line-height:1.65}
.cab{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(36px,5vw,64px);justify-items:start}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;font:600 .95rem var(--sans);border:1px solid transparent;cursor:pointer;transition:box-shadow .4s,background .4s,border-color .4s;position:relative;overflow:hidden;white-space:nowrap}
/* v25 (decisión f del dueño, 9 oct noche): el botón de cita deja el relleno de oro y pasa a cristal con borde y texto oro, para que el oro siga siendo un acento (< 5 %). Mismo nombre de clase (barra, panel del móvil, bienvenida, proceso, llamada final y barra inferior del móvil), mismo barrido de luz al pasar y mismo efecto magnético. Tinta, borde y fondo salen de --oro-*: oro claro sobre cristal oscuro y oro oscuro sobre cristal blanco en las zonas claras (contraste AA medido en la v25) */
.btn-oro{background:linear-gradient(135deg,rgba(232,206,140,.16),rgba(232,206,140,.04) 55%,rgba(232,206,140,.1)),var(--oro-fondo);border-color:var(--oro-borde);color:var(--oro-tinta);backdrop-filter:blur(14px) saturate(140%) brightness(var(--oro-brillo));-webkit-backdrop-filter:blur(14px) saturate(140%) brightness(var(--oro-brillo));box-shadow:0 14px 34px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-oro::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(232,206,140,.3) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s;pointer-events:none}
.btn-oro:hover{border-color:var(--oro-tinta);box-shadow:0 18px 40px -16px rgba(201,162,75,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-oro:hover::after{transform:translateX(120%)}
.marfil,.heroe.claro,.pantalla-liquida .cta,.nav.sobre-claro{--oro-tinta:#6E5726;--oro-borde:rgba(138,111,51,.62);--oro-fondo:rgba(255,255,255,.55);--oro-brillo:1}
.btn-vidrio{background:var(--glass);border-color:var(--line);color:var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.btn-vidrio{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,background .4s,border-color .4s}
.btn-vidrio:hover{background:var(--glass-2);border-color:var(--line-gold);transform:translateY(-2px)}
.btn-s{padding:10px 18px;font-size:.84rem}

/* Cristal */
.vidrio{position:relative;background:linear-gradient(135deg,rgba(245,239,226,.10),rgba(245,239,226,.025) 60%,rgba(245,239,226,.06));backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid var(--line);border-radius:var(--radio);box-shadow:0 40px 90px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.25);isolation:isolate}
.vidrio::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(232,206,140,.16),transparent 48%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:-1}
.vidrio:hover::before{opacity:1}
.vidrio::after{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,206,140,.9),transparent);pointer-events:none}

/* Progreso y brillo del cursor */
.progreso{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-2));z-index:60;pointer-events:none}
.brillo{position:fixed;left:0;top:0;width:560px;height:560px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(201,162,75,.13),transparent 62%);transform:translate(-50%,-50%);z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity .8s;will-change:transform}
@media(hover:none){.brillo{display:none}}

/* Navegación */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .5s,border-color .5s}
.nav-int{display:flex;align-items:center;gap:28px;height:78px;transition:height .4s}
.nav.compacta{background:rgba(14,28,21,.74);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid var(--line)}
.nav.compacta .nav-int{height:64px}
/* Barra sobre el héroe blanco (dueño, 9 oct): mientras el héroe claro pasa por debajo (clase que pone ScrollTrigger), cristal blanco y tinta verde; al salir vuelve al verde noche. El símbolo sigue dorado: no hay variante verde del símbolo (01-MARCA/logo-final/variantes-2026-10 solo tiene oro, blanco y cristal nevado) y el anillo dorado es la versión de la marca para fondos claros */
.nav.sobre-claro{background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid rgba(25,61,42,.12)}
.nav.sobre-claro .nav-enlaces,.nav.sobre-claro .nav-enlaces a,.nav.sobre-claro .idioma{color:#193D2A}
.nav.sobre-claro .marca{--qms-nombre:#8D7536;--qms-desc:#8D7536} /* barra clara: letras en oro oscuro #8D7536 (4,4:1 sobre blanco; opción C del logo, pendiente del dueño), símbolo en oro plano */
.nav.sobre-claro .nav-enlaces a::after{background:#6E5726}
.nav.sobre-claro .idioma{border-color:rgba(25,61,42,.3)}
.nav.sobre-claro .btn-vidrio{color:#193D2A;background:rgba(25,61,42,.06);border-color:rgba(25,61,42,.22)}
.nav.sobre-claro .menu{background:rgba(25,61,42,.06);border-color:rgba(25,61,42,.22)}
.nav.sobre-claro .menu span,.nav.sobre-claro .menu span::before,.nav.sobre-claro .menu span::after{background:#193D2A}
.marca{display:flex;align-items:center;gap:0;margin-right:auto;flex:none;--qms-d:39.4px} /* logo nuevo (10 oct): símbolo de 40 px (simbolo-pequeno) y nombre en texto vivo; sin sombra */
.nav-enlaces{display:flex;gap:24px;font-size:.86rem;font-weight:500;color:var(--ink-2)}
.nav-enlaces a{position:relative;padding:6px 0;transition:color .3s;white-space:nowrap}
.nav-enlaces a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold-2);transition:right .35s}
.nav-enlaces a:hover{color:var(--ink)}.nav-enlaces a:hover::after{right:0}
.nav:not(.sobre-claro) .nav-enlaces a{color:rgba(245,239,226,.9)}.nav:not(.sobre-claro) .nav-enlaces a:hover{color:var(--ink)} /* NUBE-PROPUESTAS, retoque B (22 oct 2026): sobre el vidrio oscuro de la barra los enlaces al 74 % daban 4,6:1 sobre las secciones más claras (estética, ecosistema); al 90 %, con margen */
.nav-acciones{display:flex;gap:10px;align-items:center}
.idioma{background:none;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:8px 12px;font:600 .74rem var(--sans);letter-spacing:.12em;cursor:pointer;transition:.3s}
.idioma:hover{border-color:var(--line-gold);color:var(--gold-2)}
.menu{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass);place-items:center;cursor:pointer}
.menu span,.menu span::before,.menu span::after{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:.3s}
.menu span::before,.menu span::after{content:"";position:absolute;left:0}
.menu span::before{top:-6px}.menu span::after{top:6px}
.panel{position:fixed;inset:0;z-index:49;background:rgba(14,28,21,.86);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:grid;align-content:center;justify-items:center;gap:22px;padding:100px var(--gutter) 40px;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility 0s linear .4s}
.panel.abierto{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} /* revisión de la v25: cerrado, el menú queda fuera del orden de tabulación y del árbol de accesibilidad (visibility), no solo transparente */
.panel a{font:400 clamp(1.6rem,6vw,2.2rem) var(--serif);color:var(--ink)}
.panel .acciones{margin-top:14px;justify-content:center}
.panel .acciones .btn{font:600 .95rem var(--sans)} /* revisión de la v25: «Llamar (786) 819-4066» y «Pedir cita» del menú con la letra de los demás botones (la regla .panel a los ponía en Georgia de 25,6 px) */
.panel a.btn-oro{color:var(--oro-tinta)} /* v25: en el menú del móvil el botón de cita lleva también el texto oro (la regla .panel a lo dejaba en marfil) */
@media(max-height:600px){.panel{gap:12px;padding-top:88px;padding-bottom:24px}.panel > a{font-size:1.35rem}.panel .acciones{margin-top:6px}} /* revisión de la v25: con «Pago directo» los 7 enlaces y los dos botones no cabían a 320×568 (el primero quedaba bajo la barra y «Pedir cita» cortado) */
.llamar-corto{display:none}
@media(max-width:1249px){.nav-enlaces{display:none}.menu{display:grid}} /* v25: con «Pago directo» (7 enlaces) la barra completa en español mide 1221 px con la marca, «Llamar (786) 819-4066» y «Pedir cita»; revisión de la v25: entre 1250 y 1340 px el botón de llamada dice «Llamar ahora» (mob.call_now, sin el número) y los huecos son algo más estrechos, para que los 7 enlaces se vean en línea en los portátiles de 1280–1336 px como en la v24 (medido con la letra real: en español sobran 25 px a 1250 y 55 a 1280; en inglés, más); por debajo de 1250 px pasan al menú ☰ */
@media(min-width:1250px) and (max-width:1340px){.nav-acciones .llamar-largo{display:none}.nav-acciones .llamar-corto{display:inline}.nav-int{gap:16px}.nav-enlaces{gap:15px}}
@media(max-width:767px){.nav-acciones .llamar,.nav-acciones .btn-oro{display:none}.nav-int{gap:14px}} /* revisión de la v25: hasta 767 px (antes 700), donde empieza la barra inferior del móvil con las mismas dos acciones; entre 701 y 767 px salían arriba y abajo a la vez */
@media(min-width:1341px){.nav-int{gap:20px}.nav-enlaces{gap:16px}} /* v25: con «Pago directo» la barra lleva 7 enlaces (decisión 7 del dueño, 9 oct noche): huecos algo más estrechos para que quepan con «Llamar» y «Pedir cita» */

/* Héroe */
.heroe{height:130vh;height:130svh;position:relative} /* NUBE-HEROE-TRAMO (dueño, 22 oct: «acortar ese tramo»): era 170vh y, ya fundido el texto, el corazón se quedaba solo con la mitad derecha y una franja en blanco (91 % de la pantalla vacía a 1920); con 130vh la escena se suelta antes y `confianza` sube mientras el texto termina de fundirse. La línea de tiempo (motion-cristal.js) acaba en `bottom 60%`: dura lo mismo (70vh) y el texto y el giro del corazón van igual por px. Por debajo de 901 px sigue en 150vh */
.heroe-fijo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0E1C15}
.heroe-escena{position:absolute;left:0;top:0;bottom:0;width:50%;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:60px 0 8px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;opacity:0;transition:opacity 1.2s ease;will-change:transform}
.heroe-escena.listo{opacity:1}
.heroe-escena.arrastrando{cursor:grabbing}
.heroe-escena:focus-visible{outline:2px solid #6E5726;outline-offset:-2px} /* NUBE-CONTRASTE-PORTADA: el foco común de la web; con --line-gold (oro al 55 %) daba 1,7:1 sobre el fondo claro */
/* NUBE-H1-H3 (23 oct 2026): la escena mide una pantalla entera y el contorno se cortaba arriba bajo la barra y abajo fuera de la pantalla
   (1280, 1440 y 1920). El anillo pasa a un borde propio de la escena, metido por debajo de la barra (65 px) y por encima del borde de abajo,
   que al llegar con el tabulador queda hasta 56 px fuera; en la columna del teléfono la escena es baja y cabe entera, con el anillo casi al filo */
.heroe-escena:focus-visible{outline:none}
.heroe-escena:focus-visible::after{content:"";position:absolute;z-index:3;inset:84px 12px 72px;border:2px solid #6E5726;border-radius:18px;pointer-events:none}
@media(max-width:900px){.heroe-escena:focus-visible::after{inset:80px 8px 8px}}
@media(max-width:767px) and (orientation:portrait){.heroe-escena:focus-visible::after{inset:6px}}
.heroe-video{position:relative;z-index:1;display:block;height:100%;min-height:0;width:auto;max-width:100%;object-fit:contain;pointer-events:none;animation:latir-video var(--beat) ease-out infinite;transform-origin:50% 60%}
@keyframes latir-video{0%{transform:scale(1)}10%{transform:scale(1.014)}26%{transform:scale(1)}100%{transform:scale(1)}}
/* NUBE-CORAZON-VAIVEN-SUAVE (23 oct 2026): el lienzo del relevo del péndulo. Al dar la vuelta entra el otro vídeo y en el PC del dueño (Chrome de Windows, decodificador por hardware) tardaba un cuadro o dos en pintar su fotograma: el corazón desaparecía un instante. motion-cristal.js copia el fotograma que se ve a este lienzo, lo pone encima, hace el relevo debajo y lo quita cuando el vídeo nuevo ha presentado un fotograma. Hereda de .heroe-video el tamaño, el latido y la escala del teléfono; oculto con visibility (no ocupa nada en el compositor) */
.heroe-copia{grid-area:1/1;z-index:3;visibility:hidden}
.heroe-copia.visible{visibility:visible}
.heroe-fondo-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,28,21,.35),transparent 14%,transparent 84%,#F5EFE2 100%)}
.heroe-contenido{position:absolute;inset:0;display:grid;align-content:center;grid-template-columns:1fr minmax(0,560px);gap:40px;pointer-events:none;padding-top:70px}
.heroe-texto{grid-column:2}
.heroe-eyebrow{display:grid;gap:8px;font:600 .72rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.heroe-eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--leaf);margin-right:10px;vertical-align:middle}
.btn-pildora{width:100%;max-width:440px;justify-content:space-between;padding:12px 12px 12px 26px;background:#193D2A;color:#F5EFE2;font-size:1.05rem;border-radius:999px;box-shadow:0 18px 40px -18px rgba(25,61,42,.6)}
.btn-pildora b{width:44px;height:44px;border-radius:50%;background:#F5EFE2;color:#193D2A;display:grid;place-items:center;font-weight:400;transition:transform .4s}
.btn-pildora:hover b{transform:translateX(4px)}
.heroe-pista{font-size:.82rem;color:var(--ink-3);letter-spacing:.02em}
.heroe-pista-tactil{display:none}
@media(hover:none){.heroe-pista-cursor{display:none}.heroe-pista-tactil{display:block}} /* en táctil (dueño, 9 oct) la pista habla del dedo, no del cursor */
.heroe-texto{display:grid;gap:22px;justify-items:start}
.heroe-texto > *{pointer-events:auto}
.heroe-texto .como-h1{text-shadow:0 10px 40px rgba(0,0,0,.45)}
.heroe-texto .lead{text-shadow:0 4px 18px rgba(0,0,0,.5)}
.insignia{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(14,28,21,.4);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:600 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.latido{width:8px;height:8px;border-radius:50%;background:var(--gold-2);animation:latido var(--beat) ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(232,206,140,.7);transform:scale(1)}12%{transform:scale(1.4)}40%{box-shadow:0 0 0 12px rgba(232,206,140,0)}100%{box-shadow:0 0 0 0 rgba(232,206,140,0);transform:scale(1)}}
.pastillas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pastillas li{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(14,28,21,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.82rem;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.pastillas li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf);box-shadow:0 0 8px var(--leaf)}
.heroe-tarjeta{position:absolute;right:var(--gutter);bottom:clamp(84px,10vh,120px);width:min(340px,calc(100% - 2*var(--gutter)));padding:18px 22px 20px;display:grid;gap:4px;pointer-events:auto;--radio:20px}
.heroe-tarjeta strong{font:400 1.08rem var(--serif)}
.heroe-tarjeta span{font-size:.8rem;color:var(--ink-2)}
.ecg{margin:-2px -6px 8px;height:46px}
.ecg svg{width:100%;height:100%}
.ecg path{fill:none;stroke:var(--gold-2);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:90 700;stroke-dashoffset:790;animation:ecg calc(var(--beat)*2) linear infinite;filter:drop-shadow(0 0 6px rgba(232,206,140,.7))}
@keyframes ecg{to{stroke-dashoffset:0}}
.bajar{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:36px;height:56px;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;color:var(--gold-2);font-size:.9rem;z-index:2;background:rgba(14,28,21,.3)}
.bajar i{display:block;width:1px;height:14px;background:var(--gold-2);animation:bajar 1.8s ease-in-out infinite}
@keyframes bajar{0%{transform:translateY(-6px);opacity:0}50%{opacity:1}100%{transform:translateY(8px);opacity:0}}
@media(max-width:900px){
  .heroe{height:150vh;height:150svh}
  /* Apilado (cierre de la v22, 9 oct): a la altura real de un teléfono (100svh de 640–780 px con las barras del navegador) el corazón superpuesto quedaba bajo la cejilla y el titular. Ahora el corazón ocupa lo que sobra entre la navegación y el texto (flex), y el texto va debajo, sin superponerse ni fundido */
  .heroe-fijo{display:flex;flex-direction:column}
  .heroe-escena{position:relative;top:auto;bottom:auto;left:auto;flex:1 1 0;min-height:150px;height:auto;width:100%;padding:72px 0 0}
  .heroe-video{scale:1.36} /* el fotograma 1440×2560 lleva márgenes blancos (el corazón ocupa el 15,6–85,3 % del alto en los 180 fotogramas, y lo mismo en los 225 del vídeo C de la v24): scale se compone con el transform del latido; con 1,4 la aorta quedaba 0,6 px bajo la navegación a 390×844 y 6,5 px a 768×1024; con 1,36 queda ≥ 6 px por debajo de la navegación y ≥ 8 px por encima de la cejilla en todos los tamaños */
  .heroe-contenido{position:relative;inset:auto;flex:none;grid-template-columns:1fr;align-content:end;padding-top:0;padding-bottom:18px}
  .heroe-texto{grid-column:1;gap:12px}
  .heroe-texto .como-h1{font-size:clamp(2.1rem,9.2vw,2.7rem)}
  .heroe-texto .lead{font-size:1rem}
  .heroe-texto .acciones .btn{padding:12px 18px;font-size:.88rem}
  .heroe .pastillas{gap:6px}
  .heroe .pastillas li{font-size:.72rem;padding:5px 10px;gap:6px}
  .heroe-tarjeta,.bajar{display:none}
}
@media(max-width:900px) and (max-height:760px){.heroe-texto .como-h1{font-size:2rem}.heroe-texto .lead{font-size:.94rem;line-height:1.5}} /* teléfonos con barras: titular y entradilla algo menores para que el corazón conserve ≥ 150 px */
/* NUBE-CORAZON-MOVIL (dueño, 22 oct 2026: «el corazón en el teléfono se ve muy pequeño»): en el teléfono en vertical el corazón se llevaba lo
   que dejaba el texto en una pantalla fijada de 100svh, y con las barras del navegador salía de 60–150 px de ancho (16–39 %). Ahora su tamaño
   lo da el ancho: la caja del vídeo, con el scale de 1,36 de arriba, mide el 66 % del ancho (alto del fotograma = 66vw ÷ 1,36 × 16/9). El héroe
   ya no se fija: si corazón y texto no caben en la primera pantalla, el texto sigue debajo con scroll normal (motion-cristal.js reparte el
   giro con el scroll en la salida del héroe). La escena recorta lo que el scale saca por debajo de su caja (el margen blanco del fotograma,
   que va por encima del texto) y el corazón queda entero dentro. Apaisado, tableta y escritorio, igual que antes */
@media(max-width:767px) and (orientation:portrait){
  .heroe{height:auto}
  .heroe-fijo{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .heroe-escena{flex:none;min-height:0;grid-template-rows:calc(66vw / 1.36 * 16 / 9);overflow:hidden}
  .heroe-contenido{flex:1 0 auto;padding-top:10px}
}

/* Bienvenida con vídeo (primera pantalla) */
.bienvenida{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--bg)}
.bienvenida-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;will-change:transform}
.bienvenida-velo{position:absolute;inset:0;background:radial-gradient(900px circle at 50% 60%,rgba(14,28,21,.1),rgba(14,28,21,.72)),linear-gradient(180deg,rgba(14,28,21,.45),transparent 30%,transparent 72%,var(--bg))}
.bienvenida-contenido{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:22px;padding:70px var(--gutter) 0;max-width:860px;will-change:transform}
.bienvenida-contenido{isolation:isolate}.bienvenida-contenido::before{content:"";position:absolute;z-index:-1;inset:-40px -200px;pointer-events:none;background:radial-gradient(farthest-side,rgba(6,12,9,.48),rgba(6,12,9,.44) 58%,rgba(6,12,9,0))} /* NUBE-CONTRASTE-PORTADA (dueño, 22 oct 2026: «arreglar todo»): velo oscuro y suave solo detrás del texto, con el criterio de NUBE-ESTETICA-VELO (isolation para que el ::before no quede detrás del vídeo); el centro del velo de la sección (.bienvenida-velo) es casi transparente y el lema y los botones bajaban a 1,6–2,5:1 en los fotogramas con la ventana al sol */
.bienvenida .btn-vidrio,.bienvenida .btn-oro{border-color:var(--gold-2)} /* NUBE-CONTRASTE-PORTADA: contorno de los botones sobre el vídeo en oro pleno, como el de la estética (NUBE-ESTETICA-VELO); en marfil al 14 % (vidrio) o en oro al 72 % (cita) no llegaba a 3:1 */
.bienvenida .acciones{justify-content:center} /* los dos botones centrados (dueño, 9 oct); en móvil, a ancho completo y centrados */
@media(min-width:901px){.bienvenida-contenido{padding-bottom:78px}} /* con el emblema mayor (9 oct noche): el bloque se centra en el hueco entre la barra (78 px) y el indicador de bajar (86 px desde abajo), no en toda la pantalla; sin esto, a 1366×768 el primer botón pisaba el indicador 11 px (y a 1280×720 ya lo pisaba 18 px con el emblema de 263) */
@media(min-width:901px){.bienvenida .bienvenida-emblema{width:min(360px,max(263px,35vw),58vw,40vh,calc(133.33vh - 688px));width:min(360px,max(263px,35vw),58vw,40svh,calc(133.33svh - 688px))}} /* al fusionar el logo nítido con la v25 (14 oct): con el tercer botón de la bienvenida (Guía de Longevidad, en una segunda fila en español) el bloque mide 60 px más y a 1280×720 el emblema de 288 px quedaba a 2 px de la barra y el botón de la guía a 2 px del indicador de bajar (1536×730: 5 px). Este tope por altura deja al menos 8 px arriba y abajo con el lema en tres líneas (Georgia): el bloque mide 356 px + lema 128 + 0,75 × emblema y se centra entre la barra y el indicador. Emblema: 272 px a 1280×720, 285 a 1536×730; desde 768 de alto no cambia (307 a 1366×768, 360 a 1440×900). Por debajo de 701 de alto manda la regla de portátiles bajos */
@media(max-width:700px){.bienvenida .acciones{width:100%;flex-direction:column;align-items:stretch}.bienvenida .acciones .btn{width:100%;white-space:normal;padding:12px 18px;font-size:.9rem;line-height:1.3}.bienvenida-contenido{padding-bottom:84px}} /* corrección de la v23 (revisión, 9 oct): a 360 px el segundo botón (texto largo sin partir, padding 26) medía 343 px en 328 de contenido y acababa a 1 px del borde, descentrado; con el texto partible y padding 18 miden 328 px, centrados (en una línea hasta 340 px; a 320 el primero pasa a dos). Y en teléfonos cortos (360×640, 390×664, 393×659) el botón de pausa del vídeo (44 px, bottom 30) pisaba la esquina del segundo botón: el contenido está centrado, así que con este padding inferior sube 42 px y deja 34–40 px libres */
@media(max-width:340px){.bienvenida-contenido{gap:14px}.bienvenida .bienvenida-emblema{width:min(200px,48vw)}} /* a 320×568 (iPhone SE 1.ª gen) el contenido no cabe en la pantalla y queda anclado arriba, así que el padding inferior no lo sube: emblema y separación menores para que el segundo botón acabe por encima del botón de pausa */
.bienvenida-emblema{box-sizing:content-box;width:min(360px,max(263px,35vw),58vw,40vh);width:min(360px,max(263px,35vw),58vw,40svh);height:auto;padding:64px 88px;margin:-64px -88px;background:radial-gradient(closest-side,rgba(8,18,13,.46),rgba(8,18,13,.3) 46%,rgba(8,18,13,.1) 76%,rgba(8,18,13,0))} /* logo blanco de la bienvenida (hasta el 14 oct, el trazado de 31 piezas del PNG de Canva; ahora el logo reconstruido en vector con texto vivo, en la regla siguiente). Nítido también en pantallas normales (dueño, 9 oct noche, "lo despixelado"): a DPR 1–1,25 y 263 px, el anillo fino y MEDICAL SERVICES (≈ 7 px de alto) quedaban en 1–2 píxeles y se veían borrosos, y el drop-shadow sobre el propio logo ensuciaba los bordes. Ahora crece con la pantalla (263 px hasta 751 px de ancho, 360 px desde 1029; nunca más del 58 % del ancho ni de ~30 % del alto, para que lema y botones quepan en pantallas bajas: 307 px a 1366×768, 288 a 1280×720; en el teléfono sigue en 58vw) y el contraste sobre el vídeo lo da un velo oscuro suave pintado como fondo del propio <img>, por detrás de la tinta (padding y margin negativo iguales: no cambia la maquetación), en vez de un filtro sobre el logo */
.bienvenida-emblema{display:block;container-type:inline-size}.bienvenida-emblema>.qms-logo{display:flex;--qms-d:calc(100cqi / 2.2458)} /* logo reconstruido (10 oct): el ancho de filete a filete es 2,2458 D, así que el diámetro del anillo sale del ancho de la caja (100cqi) y todas las reglas de ancho de .bienvenida-emblema siguen valiendo; texto vivo, tan nítido como el resto de palabras */
@supports not (container-type:inline-size){.bienvenida-emblema>.qms-logo{--qms-d:calc(min(360px,max(263px,35vw),58vw,40vh) / 2.2458)}}
@container (max-width:100px){.bienvenida-emblema .qms-logo__nombre,.bienvenida-emblema .qms-logo__desc{display:none}.bienvenida-emblema>.qms-logo .qms-logo__simbolo{width:73.4cqi;height:73.4cqi}} /* en los dos emblemas más pequeños (76 px en los teléfonos más bajos y 64 px en apaisado) MEDICAL SERVICES quedaría en 4 px, ilegible y muy por debajo del mínimo del manual (7 px, §4): solo el símbolo, con el mismo alto que el logo entero (0,734 del ancho), así que no cambia la maquetación. Desde 120 px se ve el logo entero */
@media(min-width:901px) and (max-height:700px){.bienvenida .bajar{display:none}.bienvenida-contenido{gap:16px;padding-top:86px;padding-bottom:16px}.bienvenida .bienvenida-emblema{width:min(40vh,max(150px,calc(133vh - 560px)));width:min(40svh,max(150px,calc(133svh - 560px)))}} /* portátiles con la barra del navegador (revisión, 10 oct: 1366×657, 1280×610, 1024×600, 1280×577): el bloque no cabía entre la barra (78 px) y el indicador de bajar, el primer botón lo pisaba 13–69 px y el emblema quedaba 8 px bajo la barra. En pantallas bajas el indicador se quita (es decorativo; la página baja igual con la rueda, el teclado o la navegación), el bloque arranca siempre bajo la barra (86 px) con separaciones de 16 px y el emblema baja de tamaño lo justo para que lema y botones quepan (263 px a 657 de alto, 244 a 610, 207 a 577; nunca menos de 150) */
.bienvenida-lema{margin:0;font:400 clamp(1.3rem,2.6vw,2.05rem)/1.3 var(--serif);color:var(--ink);text-wrap:balance;text-shadow:0 6px 24px rgba(0,0,0,.55);max-width:26ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bienvenida.sin-video .bienvenida-video{display:none}
.video-pausa{position:absolute;right:80px;bottom:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(14,28,21,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:2;display:grid;place-items:center}
.video-pausa i{display:block;width:10px;height:12px;border-left:3px solid var(--gold-2);border-right:3px solid var(--gold-2);box-sizing:border-box}
.video-pausa[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid var(--gold-2);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.video-pausa:disabled{cursor:default;opacity:.62} /* con movimiento reducido no hay nada que pausar (motion.js lo desactiva) */
/* Sin .bienvenida.sin-video .video-pausa{display:none}: el botón pausa toda la página (decisión del dueño «PAUSA ARRIBA», 17 oct), no solo el vídeo de la bienvenida */
/* v25: el botón de pausa (igual que antes) se aparta del botón flotante de WhatsApp, que ocupa la esquina inferior derecha (48 px a 20 px del borde y 24 del pie): queda a su izquierda, a 12 px y centrado con él. Por debajo de 768 px, encima de la barra inferior del móvil, en la misma fila que el WhatsApp; el contenido de la bienvenida deja ese hueco libre abajo y, en teléfonos bajos, el emblema y las separaciones se reducen para que los tres botones acaben por encima de esa fila */
@media(max-width:767px){
  .video-pausa{right:68px;bottom:calc(87px + env(safe-area-inset-bottom,0px))}
  .bienvenida-contenido{padding-bottom:calc(146px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:767px) and (max-height:830px){.bienvenida .bienvenida-emblema{width:min(360px,max(263px,35vw),58vw,40vh,calc(136.4vh - 865px));width:min(360px,max(263px,35vw),58vw,40svh,calc(136.4svh - 865px))}} /* NUBE-PAUSA-GUIA (23 oct 2026): con el cuarto botón de la bienvenida (NUBE-PROPUESTAS H4) el bloque ya no cabía en los teléfonos bajos y «Guía de Longevidad» quedaba bajo la pausa (375×740, 414×736, 430×739). Sin el emblema, el bloque mide siempre 637 px en español (610 en inglés): el emblema (alto = 0,7333 × ancho) se limita a lo que deja la pantalla para que todo quepa con 12 px entre el último botón y la pausa, (100svh + 3 − 637) / 0,7333. Donde ya cabía (375×812, 390×844, 414×896, 430×932) la fórmula da más de 58vw y no cambia nada */
@media(max-width:767px) and (max-height:700px){.bienvenida-contenido{gap:14px}.bienvenida .bienvenida-emblema{width:min(120px,34vw)}.bienvenida .acciones{gap:8px}} /* v25: con el tercer botón (Guía de Longevidad) el contenido no cabía a 360×640 y el botón de la guía pisaba la pausa y el WhatsApp (9 px): emblema algo menor y botones más juntos en teléfonos bajos */
@media(max-width:767px) and (max-height:700px){.bienvenida-contenido{gap:10px}.bienvenida .acciones{gap:6px}.bienvenida .bienvenida-emblema{width:min(120px,34vw,max(104px,calc(136.4vh - 791px)));width:min(120px,34vw,max(104px,calc(136.4svh - 791px)))}} /* NUBE-PAUSA-GUIA: por debajo de 700 px, con cuatro botones, separaciones algo menores (sin tocar el alto de los botones, 45 px) y el emblema como arriba con estas separaciones (bloque sin emblema: 583 px en español), sin bajar de 104 px para que no se oculte el nombre (la consulta de contenedor de 100 px) */
@media(max-width:767px) and (max-height:660px){.bienvenida-contenido{gap:8px}.bienvenida-lema{font-size:1.15rem}} /* NUBE-PAUSA-GUIA: a 360×640 el emblema ya está en su mínimo; el lema algo menor y 8 px entre bloques dejan los cuatro botones por encima de la pausa */
@media(max-width:767px) and (max-height:600px){.bienvenida-contenido{gap:9px}.bienvenida .bienvenida-emblema{width:min(76px,24vw)}.bienvenida-lema{font-size:1.08rem}.bienvenida .acciones{gap:6px}.bienvenida .acciones .btn{padding-block:9px}} /* v25: en los teléfonos más bajos (320×568, iPhone SE de 1.ª generación) la barra inferior y la fila de la pausa y el WhatsApp dejan menos alto: emblema, lema y botones más compactos para que los tres botones acaben por encima de la pausa */

.heroe.claro{color:var(--ink);--ink:#193D2A;--ink-2:rgba(25,61,42,.8);--ink-3:rgba(25,61,42,.62);--line:rgba(25,61,42,.14);--glass:rgba(255,255,255,.55);--glass-2:rgba(255,255,255,.8);--line-gold:rgba(176,138,58,.55);--gold-2:#6E5726}
.heroe.claro .heroe-fijo{background:#FFFFFF}
.heroe.claro .heroe-fondo-velo{background:linear-gradient(180deg,transparent 84%,#F5EFE2 100%)} /* sobre blanco sobra la sombra verde de arriba (era para los héroes oscuros): solo queda el paso a marfil */
.heroe.claro .heroe-texto .como-h1,.heroe.claro .heroe-texto .lead{text-shadow:none}
.heroe.claro .heroe-eyebrow{color:rgba(25,61,42,.72)}
.heroe.claro .btn-pildora{background:#193D2A;color:#F5EFE2;box-shadow:0 18px 40px -18px rgba(25,61,42,.55)}
.heroe.claro .btn-pildora b{background:#F5EFE2;color:#193D2A}
.heroe.claro .heroe-pista{color:rgba(25,61,42,.72)} /* 5,1:1 sobre blanco (al 62 % era 3,87:1, por debajo de AA) */
.heroe.claro .pastillas li{background:rgba(255,255,255,.6);color:var(--ink-2);border-color:rgba(25,61,42,.12)}
.heroe.claro .bajar{background:rgba(255,255,255,.5);color:#6E5726;border-color:rgba(25,61,42,.14)}.heroe.claro .bajar i{background:#6E5726}
@media(max-width:900px){
  .heroe.claro .heroe-eyebrow{color:var(--ink)} /* tinta plena (≥ 4,9:1); el fundido blanco y la máscara 44–92 % del corazón se fueron con el apilado (cierre de la v22): el corazón se ve entero y nítido */
}

/* Secciones marfil (alternan con el verde noche) */
.marfil{--ink:#193D2A;--ink-2:rgba(25,61,42,.78);--ink-3:rgba(25,61,42,.66);--line:rgba(25,61,42,.14);--line-gold:rgba(176,138,58,.55);--glass:rgba(255,255,255,.5);--glass-2:rgba(255,255,255,.75);--gold-2:#6E5726;background:#F3EEE3;color:var(--ink);border-top:1px solid rgba(201,162,75,.3);overflow:hidden;isolation:isolate}
/* Lo que hay detrás del cristal: imagen clara con paralaje, velo marfil y orbes de luz que derivan (solo animan a la vista) */
.tras{position:absolute;inset:-14% 0;z-index:0;pointer-events:none;overflow:hidden}
.tras img,.tras video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;will-change:transform}
.tras.volteado img{scale:-1 1}
.tras::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,239,226,.62),rgba(245,239,226,.18) 28%,rgba(245,239,226,.14) 70%,rgba(245,239,226,.66))}
/* Preguntas frecuentes: la ola de cristal fluye detrás, bajo un velo marfil para que la tinta siga leyéndose */
.tras-ola video{opacity:1;object-position:50% 60%;background:url(../img/cristal-ola-poster-2560.jpg) 50% 60%/cover no-repeat;background-image:image-set(url(../img/cristal-ola-poster-2560.avif) type("image/avif"),url(../img/cristal-ola-poster-2560.webp) type("image/webp"),url(../img/cristal-ola-poster-2560.jpg) type("image/jpeg"))} /* el póster va de fondo, con el mismo encuadre que el vídeo, y no en poster="": así cada pantalla descarga solo el suyo, también sin JS y con movimiento reducido (P8) */
.tras-ola video::-webkit-media-controls{display:none!important} /* sin JS, Chrome y Safari muestran a la fuerza los controles nativos y su capa tapa el póster de fondo; la ola es decorativa (aria-hidden, sin controles) */
@media(max-width:700px){.tras-ola video{object-position:62% 55%;background-position:62% 55%}} /* en la franja estrecha del teléfono (26 % del ancho del vídeo) la ola quedaba fuera del encuadre, a la derecha: el 62 % la trae a la vista (dueño, 9 oct) */
@media(max-width:700px) and (max-aspect-ratio:43/72){.tras-ola video{background-image:url(../img/cristal-ola-movil-poster.jpg)}} /* P8 (dueño, 9 oct noche: "vamos a la propuesta de cortarlo para el teléfono"): en el teléfono en vertical la ola es un corte propio de 860×1440 (columnas 1054–1914 del fotograma, colocado en su 62 %), 2,08 MB en vez de 9,89; con el mismo object-position da exactamente el encuadre de hoy en cualquier pantalla no más ancha que 43:72 (860:1440), donde cover enseña todo el alto. Más ancha (en horizontal) carga el vídeo grande. Misma consulta que data-media-movil del vídeo */
/* La ola no depende del alto de la sección: el contenedor se extiende una pantalla por arriba y por abajo y el vídeo, pegado (sticky) a la pantalla, queda quieto mientras la sección está a la vista; abrir o cerrar una pregunta no lo reescala ni lo mueve. Sin paralaje (sin transform). Sin overflow:clip (Safari < 16) queda el diseño anterior */
@supports (overflow:clip){
  #faq{overflow:clip}
  .tras-ola{inset:-100vh 0;inset:-100lvh 0;overflow:visible}
  .tras-ola video{position:sticky;inset:auto;top:0;display:block;height:100vh;height:100lvh;will-change:auto}
  .tras-ola::after{inset:100vh 0;inset:100lvh 0}
}
.tras-ola::after{background:linear-gradient(180deg,rgba(245,239,226,.78),rgba(245,239,226,.48) 206px,rgba(245,239,226,.48) calc(100% - 258px),rgba(245,239,226,.8))} /* paradas en px y centro constante: al abrir una pregunta el velo no cambia salvo en el borde inferior, que baja con la sección */
@media(max-width:700px){
  #faq .tras-ola::after{background:linear-gradient(180deg,rgba(245,239,226,.82),rgba(245,239,226,.6) 260px,rgba(245,239,226,.5) calc(100% - 258px),rgba(245,239,226,.82))} /* con la ola a la vista, la cabecera (cejilla, título y entradilla, en los primeros 260 px) va sobre un velo del 82 al 60 % y las preguntas sobre el 60–50 %, para que la ola se vea detrás de las tarjetas: con el velo de escritorio la entradilla daba 4,43–4,5:1 y las respuestas 4,36:1 */
  #faq .vidrio{background:linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.36) 55%,rgba(255,255,255,.5))} /* vidrio de las preguntas un 8–12 % más blanco que el del resto de secciones marfil: tinta ≥ 5,36:1 sobre el 5 % más oscuro a 390×844, 390×664 y 375×812 con dos respuestas abiertas */
}
@media(min-width:701px){#faq .vidrio{background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.28) 55%,rgba(255,255,255,.4))}} /* corrección de la v23 (revisión, 9 oct): en escritorio el vidrio genérico de .marfil (blanco al 10/2,5/6 %) dejaba la tinta casi sobre la ola velada al 48 % y, según el fotograma de la ola, la 5.ª pregunta y una respuesta cerca del borde inferior bajaban a 4,47 y 4,46:1; con este vidrio el mínimo sobre cuatro instantes de la ola queda por encima de 4,7:1 y la ola sigue a la vista a la derecha y entre las tarjetas */
/* Tinta plena en la entradilla y las respuestas y cejilla en oro oscuro (cierre de la v22, 9 oct): sobre el 5 % más oscuro de la ola la entradilla al 78 % daba 3,7:1 y la cejilla #6E5726 3,8:1; el velo no sube para que la ola siga viéndose */
#faq .lead,#faq .cab p,#faq details > :not(summary){color:#193D2A}
#faq .cejilla{color:#3F3114} /* el mismo oro oscuro que la regla de accesibilidad del final (#faq .cejilla,#pricing .cejilla) */
/* Cabecera de las preguntas en escritorio (veredicto 3 del auditor, 17 oct): el mismo velo del 82 al 60 % que en el teléfono sobre los primeros 260 px; las preguntas siguen sobre el 60–48 % para que la ola se vea */
@media(min-width:701px){#faq .tras-ola::after{background:linear-gradient(180deg,rgba(245,239,226,.82),rgba(245,239,226,.6) 260px,rgba(245,239,226,.48) calc(100% - 258px),rgba(245,239,226,.8))}}
/* Estas reglas venían del prototipo con sus ids (#preguntas, #filosofia); en la web son #faq y #why-quintana (veredicto 3, 17 oct) */
.orbe{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform;animation:orbe 24s ease-in-out infinite alternate;animation-play-state:paused;z-index:1}
.marfil.a-la-vista .orbe{animation-play-state:running}
.orbe-a{width:max(46vw,340px);height:max(46vw,340px);left:-12%;top:-6%;background:radial-gradient(circle,rgba(94,156,51,.30),rgba(94,156,51,0) 64%)}
.orbe-b{width:max(38vw,300px);height:max(38vw,300px);right:-10%;top:26%;background:radial-gradient(circle,rgba(201,162,75,.36),rgba(201,162,75,0) 64%);animation-duration:29s;animation-delay:-9s}
.orbe-c{width:max(34vw,280px);height:max(34vw,280px);left:28%;bottom:-14%;background:radial-gradient(circle,rgba(36,86,64,.28),rgba(36,86,64,0) 64%);animation-duration:33s;animation-delay:-17s}
@keyframes orbe{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.16)}}
.marfil .vidrio{background:linear-gradient(135deg,rgba(255,255,255,.56),rgba(255,255,255,.24) 55%,rgba(255,255,255,.42));backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%);border:1px solid rgba(255,255,255,.82);box-shadow:0 36px 70px -36px rgba(25,61,42,.5),0 1px 0 rgba(255,255,255,.5),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(25,61,42,.05),inset 0 0 0 1px rgba(255,255,255,.22)}
.marfil .vidrio::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent)}
.marfil .foto-tema,.marfil .stat-foto,.marfil .mapa{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Las fotos se acercan al pasar el puntero o el dedo (como en la web actual) */
.foto-tema img,.stat-foto img,.marco-img img,.panel-foto img{transition:transform .8s cubic-bezier(.2,.8,.2,1);will-change:transform}
.foto-tema:hover img,.stat-foto:hover img,.marco-img:hover img,.panel-foto:hover img,.zoom.tocada img{transform:scale(1.07)}
.sede .tras::after{background:linear-gradient(180deg,rgba(245,239,226,.5),rgba(245,239,226,.1) 30%,rgba(245,239,226,.1) 70%,rgba(245,239,226,.6))}
.sede .ficha dd.tel{font-size:1.7rem}
@media(max-width:900px){.marfil .vidrio{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}}
.marfil .vidrio::before{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(201,162,75,.2),transparent 48%)}
.marfil .num,.marfil .columna li::before,.marfil .tarjeta footer,.marfil .precio strong,.marfil .ficha dd.tel,.marfil .stat b,.marfil .paso-num{color:#6E5726}
.marfil .lista-oro li::before{border-color:#B08A3A}
.marfil .ecg-largo path{stroke:#B08A3A;filter:none}
.marfil .chips-oro li{background:rgba(201,162,75,.16);color:#5F4A1F;border-color:rgba(176,138,58,.55)}
.marfil .columna-oro{background:linear-gradient(135deg,rgba(201,162,75,.22),rgba(255,255,255,.5) 70%)}
.marfil .pregunta summary::after{--gold-2:#6E5726;border-color:rgba(176,138,58,.6)}
.marfil .btn-vidrio{background:rgba(255,255,255,.62)}
.marfil .stat-foto span{background:rgba(255,255,255,.7);color:var(--ink)}
.marfil .cita{color:var(--ink)}
.marfil .foto-tema{overflow:hidden;--radio:28px;padding:0}
.marfil .foto-tema img{width:100%;height:100%;object-fit:cover;border-radius:inherit;aspect-ratio:1}

/* Estética en 3D (segunda escena WebGL, fijada al hacer scroll) */
.estetica-3d{padding-block:0;background:#0E1C15}
.estetica-fijo{position:relative;min-height:100vh;min-height:100svh;display:grid;align-content:center;padding-block:clamp(72px,10vw,120px);overflow:hidden}
.estetica-fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.estetica-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.estetica-velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,28,21,.74),rgba(14,28,21,.3) 52%,rgba(14,28,21,.12)),linear-gradient(180deg,rgba(14,28,21,.45),transparent 22%,transparent 78%,rgba(14,28,21,.55))}
.estetica-capa{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.estetica-capa .cab{margin-bottom:0;position:relative}
.estetica-capa .cab::before{content:"";position:absolute;inset:-28px -32px;border-radius:28px;background:radial-gradient(closest-side,rgba(14,28,21,.62),transparent);z-index:-1;pointer-events:none}
@media(min-width:901px){.estetica-capa .cab{isolation:isolate}.estetica-capa .cab::before{inset:-190px -260px;border-radius:0;background:radial-gradient(farthest-side,rgba(6,12,9,.45),rgba(6,12,9,.4) 68%,rgba(6,12,9,0))}} /* velo suave detrás del texto (dueño, 22 oct, NUBE-ESTETICA-VELO): elipse muy difuminada con el centro uniforme que cubre toda la columna; isolation la deja delante del vídeo (sin ella, el z-index:-1 la ponía detrás); en el móvil el texto ya pasa de 8:1 y no se oscurece */
.estetica-capa .cab .btn-vidrio{border-color:var(--gold-2)} /* contorno del botón sobre el vídeo (NUBE-ESTETICA-VELO): con --line (14 %) no llegaba a 1,5:1; en oro pleno pasa de 3:1 en el peor fotograma también en el móvil, donde no hay velo (con el oro al 72 % se quedaba en 2,7) */
.estetica-3d .paso-est{background:linear-gradient(135deg,rgba(14,28,21,.62),rgba(14,28,21,.5) 60%,rgba(14,28,21,.58))} /* NUBE-CONTRASTE-PORTADA: las tarjetas de los pasos van en la zona derecha, donde el velo de la sección casi no llega (.12) y el vidrio claro dejaba el texto al 74 % en 3,0–4,3:1 sobre las esferas; vidrio oscuro, como las tarjetas del «viaje» */
.estetica-3d .num{color:var(--gold-2)} /* «01/02/03» de los pasos: en --gold (#C9A24B) daban 2,4–3,4:1 */
.estetica-pasos{position:relative;min-height:360px}
.paso-est{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(420px,100%)}
@media(max-width:900px){.estetica-capa{grid-template-columns:1fr}.estetica-pasos{min-height:0;display:grid;gap:16px}.paso-est{position:static;transform:none;width:auto}}
@media(min-width:901px) and (prefers-reduced-motion:reduce),(min-width:901px) and (scripting:none){.estetica-pasos{min-height:0;display:grid;gap:16px}.paso-est{position:static;transform:none;width:auto}} /* QA P3-4: con movimiento reducido la escena no se fija (motion-cristal.js) y las tres tarjetas van a la vez, en su columna; sin JS, igual (antes salían superpuestas) */

/* Confianza */
.confianza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px;list-style:none;padding:0;margin:0}
.confianza li{padding:20px;display:grid;gap:6px;--radio:18px;min-width:0}
.confianza b{font:400 1rem var(--serif)}
.confianza span{font-size:.78rem;color:var(--ink-2)}

/* Tarjetas */
.rejilla-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.tarjeta{padding:28px 26px 22px;display:grid;gap:12px;align-content:start;min-width:0;transition:border-color .4s;transform-style:preserve-3d}
.inclina.listo{transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .4s}
.tarjeta:hover{border-color:var(--line-gold)}
.num{font:400 .85rem var(--serif);color:var(--gold);letter-spacing:.14em}
.etiqueta{font:600 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.tarjeta p{color:var(--ink-2);font-size:.95rem}
.tarjeta footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--gold-2)}
.flecha{font-style:normal;transition:transform .4s}
.tarjeta:hover .flecha{transform:translateX(6px)}

/* Fondos líquidos */
.fondo-liquido{overflow:hidden;background:var(--bg-2)}
.paralaje{position:absolute;inset:-18% 0;z-index:0}
.paralaje img{width:100%;height:100%;object-fit:cover;opacity:.5}
.fondo-liquido::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),rgba(14,28,21,.2) 25%,rgba(14,28,21,.2) 75%,var(--bg));pointer-events:none;z-index:0}

/* Dos columnas, listas, estadísticas */
.dos-col{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,90px);align-items:center}
.dos-col > *{min-width:0}
.dos-col .cejilla{margin-bottom:16px}
.dos-col h2{margin-bottom:16px}
@media(max-width:900px){.dos-col{grid-template-columns:1fr}}
.lista-oro{list-style:none;padding:0;margin:26px 0 0;display:grid}
.lista-oro li{display:flex;gap:14px;align-items:flex-start;color:var(--ink-2);padding:12px 0;border-bottom:1px solid var(--line)}
.lista-oro li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--gold);background:radial-gradient(circle,rgba(201,162,75,.55),transparent 70%);margin-top:4px}
.estadisticas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{padding:26px;display:grid;gap:8px;min-width:0}
.stat b{font:400 2.4rem/1 var(--serif);color:var(--gold-2);font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;color:var(--ink-2)}
.stat-foto{grid-column:1/-1;padding:0;overflow:hidden;aspect-ratio:4/3;max-width:100%}
.stat-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:inherit}
.stat-foto span{position:absolute;left:18px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgba(14,28,21,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--ink);font-size:.78rem}

/* Prevención con ECG */
.panel-ancho{padding:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);overflow:hidden;min-height:min(600px,74vh)}
.ecg-largo{position:absolute;left:0;bottom:-6px;height:120px;width:52.5%;opacity:.6;pointer-events:none;z-index:1}
.ecg-largo path{fill:none;stroke:var(--gold-2);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(232,206,140,.6))}
.panel-int{position:relative;display:grid;gap:18px;justify-items:start;align-content:center;padding:clamp(36px,5vw,64px);padding-bottom:calc(clamp(36px,5vw,64px) + 84px);min-width:0}
.panel-foto{position:relative;--radio:0;border:0;box-shadow:none;min-height:100%;backdrop-filter:none;-webkit-backdrop-filter:none}
.panel-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:0}
.marfil .panel-foto::after{left:0;right:auto;top:0;bottom:0;height:auto;width:30%;background:linear-gradient(90deg,rgba(252,250,245,.92),rgba(252,250,245,0))}
@media(max-width:1100px){.panel-ancho{grid-template-columns:1fr;min-height:0}.panel-foto{order:-1;min-height:0;aspect-ratio:16/10}.ecg-largo{width:100%}.marfil .panel-foto::after{width:100%;height:34%;top:auto;bottom:0;background:linear-gradient(180deg,rgba(252,250,245,0),rgba(252,250,245,.92))}}
.chips-oro{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.chips-oro li{padding:9px 16px;border-radius:999px;border:1px solid var(--line-gold);background:rgba(201,162,75,.1);color:var(--gold-2);font-size:.82rem;font-weight:600}

/* Comparación */
.comparar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.columna{padding:32px 30px;min-width:0}
.columna h3{margin-top:8px;font-size:1.6rem}
.columna ol{list-style:none;counter-reset:n;padding:0;margin:20px 0 0;display:grid;gap:14px}
.columna li{counter-increment:n;display:grid;grid-template-columns:30px 1fr;gap:12px;color:var(--ink-2);align-items:baseline}
.columna li::before{content:counter(n,decimal-leading-zero);font:400 .85rem var(--serif);color:var(--gold)}
.columna-oro{border-color:var(--line-gold);background:linear-gradient(135deg,rgba(201,162,75,.16),rgba(245,239,226,.03) 70%)}

/* Perfil */
.perfil{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.perfil > *{min-width:0}
.marco{padding:14px;--radio:28px;margin:0}
.marco-img{overflow:hidden;border-radius:18px}
.marco img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:top}
.marco figcaption{font-size:.74rem;color:var(--ink-3);padding:14px 6px 2px;letter-spacing:.04em}
.subtitulo{color:var(--gold-2);font-weight:600;font-size:.9rem;letter-spacing:.04em;margin:10px 0 18px}
.cita{margin:24px 0 0;padding-left:20px;border-left:2px solid var(--gold);font:italic 1.15rem/1.5 var(--serif);color:var(--ink)}
@media(max-width:900px){.perfil{grid-template-columns:1fr}.marco{max-width:420px}}

/* Proceso (pista horizontal) */
.viaje{position:relative;background:var(--bg-2);overflow:hidden;isolation:isolate}
.viaje-fondo{position:absolute;inset:0;pointer-events:none} /* sin z-index: con él era un contexto de apilamiento propio y el "screen" del vídeo no veía el fondo de la sección (quedaba un rectángulo negro) */
.viaje-video{position:absolute;right:-4%;top:0;height:100%;width:46%;object-fit:cover;object-position:50% 50%;opacity:1;mix-blend-mode:screen} /* el vídeo (v21) es la hélice sola sobre negro puro, sin plexus ni partículas: en "screen" el negro desaparece y queda solo la hélice sobre el fondo de la sección */
.viaje-velo{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-2) 26%,rgba(22,52,40,.5) 45%,rgba(22,52,40,.1) 57%,transparent 63%)} /* protege las tarjetas a la izquierda sin tapar la hélice; en el mismo verde de la sección (22,52,40): con el verde noche (14,28,21) quedaba una franja oscura entre el 26 y el 57 % (dueño, 9 oct) */
.viaje-fijo{position:relative;z-index:1}
@media(max-width:900px){.viaje-video{right:auto;left:0;width:100%;opacity:.9}.viaje-velo{background:linear-gradient(180deg,rgba(14,28,21,.72),rgba(14,28,21,.4) 40%,rgba(14,28,21,.66))}}
.viaje-fijo{min-height:100vh;display:grid;grid-template-columns:minmax(0,100%);align-content:center;gap:44px;padding-block:90px} /* minmax(0,100%): sin ello la única columna medía el max-content de la pista (2076 px) y la cabecera se centraba dentro de ella, sobre la hélice */
.viaje-cab{display:grid;gap:16px;max-width:720px}
.viaje-fijo > .viaje-cab{justify-self:start;margin-inline:max(var(--gutter),calc((100% - var(--maxw))/2)) auto} /* en la columna del contenedor como el resto de la página (100 px a 1440, 340 a 1920) y alineada con la tarjeta 01, bajo la zona que protege el velo */
.viaje-cab h2{text-shadow:0 2px 24px rgba(14,28,21,.6)}
.viaje-pista{display:flex;gap:20px;padding-inline:max(var(--gutter),calc((100% - var(--maxw))/2)) var(--gutter);width:max-content;position:relative;z-index:1} /* empieza en la columna del contenedor (la 01 bajo el título) y termina a un margen del borde: el recorrido sale de scrollWidth */
.paso{width:min(380px,78vw);padding:34px 30px 30px;display:grid;gap:14px;align-content:start;flex:none;min-width:0}
.viaje .paso{background:linear-gradient(135deg,rgba(245,239,226,.10),rgba(245,239,226,.025) 60%,rgba(245,239,226,.06)),rgba(22,52,40,.75)} /* fondo verde de la sección bajo el vidrio: la hélice que pasa por detrás de la 03 (y de la última) queda como reflejo y no como mancha. Al 75 % (antes 62 %; NUBE-SIN-PARPADEO, 22 oct 2026): a 1920 la hélice pasa tras el texto de la 04, que se quedaba en 4,2:1; así no baja de 4,9:1 */
.viaje .paso-fin{background:linear-gradient(135deg,rgba(201,162,75,.18),rgba(245,239,226,.03)),rgba(22,52,40,.62)}
.paso-num{font:400 3rem/1 var(--serif);color:var(--gold-2);opacity:.85}
.paso p{color:var(--ink-2)}
.paso-fin{align-content:center;justify-items:center;background:linear-gradient(135deg,rgba(201,162,75,.18),rgba(245,239,226,.03));border-color:var(--line-gold)}
.viaje-linea{position:absolute;left:max(var(--gutter),calc((100% - var(--maxw))/2));right:var(--gutter);bottom:60px;height:1px;background:var(--line)} /* empieza en la columna del contenedor, como el título y la tarjeta 01 (cierre de la v22) */
.viaje-linea i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform-origin:left;transform:scaleX(0)}
@media(prefers-reduced-motion:reduce){.viaje-pista{width:auto;flex-wrap:wrap}.viaje-linea{display:none}}
html.sin-gsap .viaje-pista{width:auto;flex-wrap:wrap}html.sin-gsap .viaje-linea{display:none}
@media(max-width:900px){.viaje-fijo{min-height:0}.viaje-pista{width:auto;flex-direction:column;align-items:stretch}.paso{width:auto}.viaje-linea{display:none}}

/* Precios */
/* Aviso del Estimado de buena fe bajo la entradilla de pago directo (revisión de la v25, L-07: el dueño respondió «sí, añadir el aviso» en PREGUNTAS-DUENO 18 y la web publicada lo lleva junto al pago directo en /primary-care): texto exacto de abt.p3.desc y enlace a Derechos del paciente (#costs) */
.aviso-gfe{max-width:62ch;margin-top:2px;padding:12px 18px;border-radius:18px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink-2);font-size:.92rem;line-height:1.6}
.aviso-gfe a{color:var(--gold-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.aviso-gfe a:hover{text-decoration-thickness:2px}
.aviso-gfe a:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:4px}
.precio{padding:30px 28px;display:grid;gap:10px;align-content:start;min-width:0}
.precio strong{font:400 1.25rem var(--serif);color:var(--gold-2)}
.precio p{color:var(--ink-2);font-size:.95rem;margin-bottom:8px}
.precio .btn{justify-self:start;margin-top:auto}

/* Ubicación */
.ficha{display:grid;gap:18px;padding:32px 30px}
.ficha dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:18px 24px}
.ficha dt{font:600 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.ficha dd{margin:0;color:var(--ink);font-size:.95rem}
.ficha dd.tel{font:400 1.5rem/1.1 var(--serif);color:var(--gold-2);user-select:all}
.mapa{position:relative;overflow:hidden;--radio:28px;aspect-ratio:16/10;padding:0;background:#DCE5DC}
.mapa::after{display:none}
.mapa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.mapa:hover .mapa-img{transform:scale(1.035)}
.mapa-pin{position:absolute;left:58%;top:52%;width:0;height:0}
.mapa-pin i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:#C9A24B;border:3px solid #FFFFFF;box-shadow:0 8px 20px -6px rgba(25,61,42,.7)}
.mapa-pin::before,.mapa-pin::after{content:"";position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;border:2px solid rgba(201,162,75,.75);animation:onda 2.6s ease-out infinite}
.mapa-pin::after{animation-delay:1.3s}
@keyframes onda{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.mapa-etiqueta{position:absolute;left:58%;top:52%;transform:translate(-50%,calc(-100% - 22px));padding:10px 14px;border-radius:12px;background:rgba(25,61,42,.92);color:#F5EFE2;display:grid;gap:2px;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(25,61,42,.6)}
.mapa-etiqueta b{font:600 .8rem var(--sans)}
.mapa-etiqueta span{font:500 .7rem var(--sans);letter-spacing:.04em;color:rgba(245,239,226,.78)}
.mapa-etiqueta::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:rgba(25,61,42,.92);transform:translateX(-50%) rotate(45deg)}
.mapa-dir{position:absolute;left:18px;right:18px;bottom:18px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(25,61,42,.12);font-size:.85rem;color:var(--ink)}
.mapa-credito{position:absolute;right:10px;bottom:62px;font:500 .58rem var(--sans);letter-spacing:.04em;color:rgba(25,61,42,.5)}
@media(max-width:600px){.mapa-etiqueta{transform:translate(-70%,calc(-100% - 22px))}.mapa-etiqueta::after{left:70%}}
/* Cómo llegar (dueño, 9 oct noche): un solo botón y la tarjeta del mapa, con el mismo comportamiento (ver el guion "Cómo llegar"); la tarjeta entera es el enlace */
.mapa-enlace{position:absolute;inset:0;z-index:2;border-radius:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mapa-enlace:focus-visible{outline:2px solid #6E5726;outline-offset:-5px}

/* Preguntas */
.preguntas{display:grid;gap:12px;max-width:860px}
.pregunta{padding:0;--radio:18px;overflow:hidden}
.pregunta summary{list-style:none;cursor:pointer;padding:20px 68px 20px 24px;font:400 1.12rem/1.35 var(--serif);position:relative}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:"";position:absolute;right:22px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--line-gold);background:linear-gradient(var(--gold-2),var(--gold-2)) center/12px 1.5px no-repeat,linear-gradient(var(--gold-2),var(--gold-2)) center/1.5px 12px no-repeat;transition:transform .4s}
.pregunta[open] summary::after{transform:translateY(-50%) rotate(45deg)}
@media(max-width:767px){.pregunta summary{padding-right:92px}.pregunta summary::after{right:48px}} /* NUBE-PULIDO-MOVIL (22 oct 2026, NUBE-REVISION-VISUAL P3-1): en el teléfono el «+» quedaba bajo el botón de WhatsApp (fijo a 14 px del borde, 44 de ancho) al pasar las preguntas; a 48 px del borde de la tarjeta queda fuera de su columna (tarjeta a 16 px del borde: 16 + 48 ≥ 14 + 44 + 6 de aire) */
.respuesta{padding:0 24px 22px;color:var(--ink-2);font-size:.95rem;max-width:72ch}

/* CTA */
.cta{padding:clamp(40px,6vw,80px);text-align:center;display:grid;gap:20px;justify-items:center;background:linear-gradient(135deg,rgba(201,162,75,.16),rgba(245,239,226,.03) 60%);border-color:var(--line-gold);overflow:hidden}
.cta .lead{text-align:center}
.cta .acciones{justify-content:center}
.cta .nota{font-size:.85rem;color:var(--ink-3)}
.cta .nota > span + span::before{content:" · "} /* teléfono · correo · dirección en una línea; en móvil (cierre de la v22) cada tramo en su línea y la dirección sin cortar a mitad */
@media(max-width:700px){.cta .nota > span{display:block}.cta .nota > span + span::before{content:none}}
.cta .nota > .nota-horario{display:block;margin-top:2px}.cta .nota > .nota-horario::before{content:none!important} /* NUBE-PROPUESTAS, propuesta 2 (H6): el horario en su propia línea, debajo */
@media(max-width:340px){.cta{padding-inline:28px}.cta .nota{font-size:.78rem}} /* corrección de la v23: a 320 px (iPhone SE 1.ª gen) el correo medía 232 px en los 208 px de contenido del panel (padding 40) y ensanchaba la nota entera, que acababa a 15 px del borde en vez de 40; solo con el cuerpo menor seguía midiendo 219 px, así que en esa anchura el panel lleva además 28 px de padding lateral (232 px de contenido) */
.cta .halo{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.28),transparent 65%);top:-260px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:-1}
/* Última pantalla: fondo verde noche con una luz que sigue al ratón (o la inclinación del móvil) y el panel de la llamada en marfil */
.pantalla-liquida{padding-block:0;display:grid;align-items:center;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#1E3A2C,#0F2118 60%,#0A160F);isolation:isolate}
.liquido-fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
/* El banner es un cristal nevado (v21, referencia del dueño: un cristal visto de frente): velo blanco denso en los bordes y casi transparente en el centro, escarcha, reflejos diagonales suaves, borde interior claro y sombra interior fría. v24 (dueño, 9 oct: "quitar el líquido cayendo del banner"): sin el ácido hialurónico detrás, el cristal queda sobre el marfil del propio panel; fuera también su desenfoque de fondo de 5 px, que solo servía para ver las gotas a través del hielo (sobre un fondo liso no cambia nada y ahorra una pasada de backdrop-filter) */
.cta-velo{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;background:radial-gradient(92% 72% at 50% 50%,rgba(255,255,255,.07),rgba(255,255,255,.14) 52%,rgba(255,255,255,.34) 80%,rgba(255,255,255,.58)),linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(255,255,255,.16));box-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(255,255,255,.58),inset 0 0 46px rgba(150,178,192,.22),inset 0 0 120px -30px rgba(118,150,166,.26)}
.cta-velo::before{content:"";position:absolute;left:-18%;top:-70%;width:52%;height:240%;transform:rotate(20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22) 50%,rgba(255,255,255,0));pointer-events:none}
.cta-velo::after{content:"";position:absolute;right:-30%;bottom:-40%;width:60%;height:120%;transform:rotate(20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1) 50%,rgba(255,255,255,0));pointer-events:none}
/* Escarcha: ruido de luminancia neutro (feTurbulence #escarcha a 0,65, contraste ×6 porque el ruido fractal es muy plano) en superposición al 50 %, solo de aclarado: feComponentTransfer aplana a gris medio (neutro en superposición) la mitad oscura del ruido, así el grano es hielo blanco y nunca motas pardas (v22 corregida); sobre el marfil (v24, sin el líquido) el grano queda fino, más visible en el borde frío que en el centro, y la tinta da ≥ 9,6:1 sobre el 5 % más oscuro del fondo; el gris 50 % de reserva es neutro si el filtro no carga */
.cta-escarcha{position:absolute;inset:0;z-index:0;border-radius:inherit;background:#808080;opacity:.5;mix-blend-mode:overlay;pointer-events:none;filter:url(#escarcha)}
.pantalla-liquida .cta h2,.pantalla-liquida .cta .lead,.pantalla-liquida .cta .nota{text-shadow:0 1px 0 rgba(255,255,255,.6),0 2px 18px rgba(255,255,255,.45)}
.pantalla-liquida .cta > :not(.cta-velo):not(.cta-escarcha):not(.halo){position:relative;z-index:1}
.pantalla-liquida .cta .halo{display:none}
.liquido-brillo{position:absolute;inset:0;background:radial-gradient(640px circle at var(--lx,50%) var(--ly,30%),rgba(232,206,140,.22),transparent 62%);pointer-events:none}
.pantalla-liquida .contenedor{padding-block:clamp(72px,10vh,120px);z-index:2} /* sin min-height de pantalla completa (v22 corregida): el panel ya no deja 150-300 px de verde vacío encima y debajo, solo este margen */
.pantalla-liquida .cta{max-width:860px;margin-inline:auto;background:#FBF7EE;overflow:hidden;border-color:rgba(255,255,255,.8);color:#193D2A;--ink:#193D2A;--ink-2:rgba(25,61,42,.8);--ink-3:rgba(25,61,42,.64);--glass:rgba(25,61,42,.08);--glass-2:rgba(25,61,42,.16);--line:rgba(25,61,42,.16);--line-gold:rgba(176,138,58,.55);--gold-2:#6E5726;box-shadow:0 40px 90px -40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.95)}
.pantalla-liquida .cta .halo{background:radial-gradient(circle,rgba(201,162,75,.35),transparent 65%)}
.pantalla-liquida .cta .nota,.pantalla-liquida .cta .lead{color:#193D2A} /* tinta plena (v22, por las gotas que se veían tras el hielo: el lead al 80 % bajaba a 2,9:1); se queda en la v24 sin el líquido */
.pantalla-liquida .cta .btn-vidrio{color:#193D2A}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);padding:12px 18px;border-radius:999px;background:rgba(14,28,21,.85);border:1px solid var(--line-gold);color:var(--gold-2);font-size:.85rem;opacity:0;transition:.4s;z-index:70;pointer-events:none;backdrop-filter:blur(12px)}
.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:767px){.toast{bottom:calc(146px + env(safe-area-inset-bottom,0px))}} /* v25: por encima de la barra inferior del móvil y de la fila del WhatsApp; el aviso ya solo sale al copiar la dirección */

/* Pie */
/* Pie sin la ola: el dueño pidió quitar el agua de la última pantalla (8 oct); la ola sigue tras las preguntas */
.pie{border-top:1px solid var(--line);padding-block:64px 40px;background:linear-gradient(180deg,var(--bg),#0A140F)}
/* v25 (9 oct noche): el pie suma lo decidido el 9 oct que le faltaba (INVENTARIO-WEB-ACTUAL.md): columnas «Navegación» y «Áreas médicas» con «Guía de Longevidad», que abre el formulario (F-10); los cinco enlaces legales de la web publicada en una barra fina de cristal (L-02); y la firma «Hecho por Salmeron Studios» del kit de 05-WEB (M-01). Se quedan la marca, la zona, el horario, los datos de contacto (C-14) y el aviso APRN (L-01) */
.pie-int{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.2fr);gap:24px 36px;font-size:.9rem;color:var(--ink-2)}
.pie-int > *{min-width:0;display:grid;gap:10px;align-content:start}
/* Pie con todo lo del pie publicado (dueño, 9 oct noche; DECISIONS «2026-10-09 (noche, 8)»: "me gusta en esa parte el logo en blanco. Solamente el logo. Y o sea, todo lo que está ahí"): de logo, solo el símbolo monocromo marfil del pie de 05-WEB (a 60 px como .q-footer-logo; desde el 10 oct, el símbolo reconstruido en vector en blanco, img/simbolo-pequeno-blanco.svg, la versión para 32–64 px, en lugar de simbolo-mono-marfil-300.webp de 05-WEB) en vez del logotipo en oro (M-03); «Quintana Medical Services» en negrita sobre la dirección, teléfono (tel:) y correo (mailto:) enlazados y el fax sin enlace; en «Navegación», «Prevención» y «Estética clínica» con las claves del pie de /contact (ftr.longevity, ftr.aesthetics); y «Pausar movimiento» junto a los enlaces legales, como en la web publicada */
.pie-logo{display:block;width:60px;height:60px;object-fit:contain;margin-bottom:6px}
.pie-zona{color:var(--ink-3);font-size:.82rem}
.pie-contacto strong{color:var(--ink);font-weight:600}
.pie-contacto a{color:var(--gold-2);text-decoration:underline;text-decoration-color:rgba(232,206,140,.35);text-underline-offset:3px;transition:text-decoration-color .3s,color .3s}
.pie-contacto a:hover,.pie-contacto a:focus-visible{color:var(--ink);text-decoration-color:currentColor}
.pie-contacto a:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:2px}
.pie-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.pie-enlaces{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie-enlaces a{color:var(--ink-2);background:linear-gradient(var(--gold-2),var(--gold-2)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:color .3s,background-size .35s}
.pie-enlaces a:hover,.pie-enlaces a:focus-visible{color:var(--ink);background-size:100% 1px}
/* Revisión del pie (14 oct): los títulos de columna como en el pie publicado (.q-footer-heading: letra sin serifa, mayúsculas espaciadas, en oro), a la medida de las cejillas del prototipo; las claves no cambian. «Horarios de atención» es un bloque propio (.pie-horario) que en escritorio y tableta va bajo «Áreas médicas», justo antes del contacto, como en /contact (Navegación → Horarios → Contacto), para que las columnas tengan una altura parecida; en el móvil sigue bajo el contacto. Las cuatro columnas, desde 1201 px (antes, desde 1001; entre 1001 y 1200 el horario partía «9:00 AM – 5:00 PM» y el correo se salía); la tercera es algo más ancha para que el horario quepa sin partir «Suite 310.» a partir de unos 1260 px. Los párrafos evitan dejar una palabra sola en la última línea y el correo puede partirse tras la arroba (<wbr>) para no salirse de su columna en los anchos justos (1201-1260 y 561 px) */
.pie h4{font:700 .76rem/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.pie-int{grid-template-areas:"marca nav areas contacto" "marca nav horario contacto"}
.pie-int p{text-wrap:pretty}
.pie-marca{grid-area:marca}.pie-nav{grid-area:nav}.pie-areas{grid-area:areas}.pie-contacto{grid-area:contacto}.pie-horario{grid-area:horario}
.pie-contacto h4 + p,.pie-horario h4 + p{margin-top:-2px}
.pie-legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:14px;font-size:.78rem;color:var(--ink-3);max-width:100%}
/* PIE-SIN-COSTURA (24 oct 2026, el dueño con captura: «un pequeño error cuando toco fuera de la pantalla»): la barra ya no lleva backdrop-filter. Sobre el fondo liso del pie el desenfoque no se veía (con y sin él, 5 niveles de 255 como mucho), y Chrome con la tarjeta gráfica lo recalculaba solo en un trozo de la barra al moverse el brillo que sigue al ratón: quedaba una franja clara con el borde recto dentro de la barra */
.pie-legales{display:flex;flex-wrap:wrap;gap:6px;width:fit-content;max-width:100%;padding:6px;border-radius:999px;border:1px solid rgba(245,239,226,.14);background:linear-gradient(135deg,rgba(245,239,226,.07),rgba(245,239,226,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pie-legales a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 16px;border-radius:999px;border:1px solid rgba(245,239,226,.1);background:rgba(245,239,226,.04);color:var(--ink-2);font:600 .76rem/1.25 var(--sans);letter-spacing:.02em;text-align:center;transition:color .3s,box-shadow .3s,border-color .3s,background .3s}
.pie-legales a:hover,.pie-legales a:focus-visible{color:var(--ink);border-color:transparent;background:rgba(245,239,226,.08);box-shadow:inset 0 0 0 1px rgba(201,162,75,.6)}
.pie-legales a:focus-visible,.pie-enlaces a:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
@media(max-width:1200px){.pie-int{grid-template-columns:1fr 1fr;grid-template-areas:"marca nav" "areas contacto" "horario contacto";row-gap:40px}}
@media(max-width:800px){.pie-legales{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:24px}.pie-legales a{min-height:40px;border-radius:18px}.pie-legales a:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:560px){.pie-int{gap:32px 20px;grid-template-areas:"marca marca" "nav areas" "contacto contacto" "horario horario"}}
/* Firma «Built by / Hecho por Salmeron Studios ↗»: el kit de 05-WEB (refinement.css, .qms-studio-signature y .lp-firma) sin cambios; el giro del logo al pulsar va en el guion (firma-salmeron.js) */
.pie-firma{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:center;color:#DCE5DC;font-size:.875rem} /* revisión de la v25: 14 px, como .lp-firma en 05-WEB (el logo, a 1.5em, mide 21 px de alto) */
.lp-firma{display:inline-flex;align-items:center;gap:.4em;color:inherit;text-decoration:none;cursor:pointer;border-radius:6px;-webkit-tap-highlight-color:transparent}
.lp-firma-texto,.lp-firma-flecha{opacity:.72;transition:opacity 200ms ease}
.lp-firma-elev{display:inline-flex;transform:translateZ(0);transition:transform 200ms cubic-bezier(.22,1,.36,1),filter 200ms ease}
.lp-firma-logo{display:inline-flex;transform-origin:50% 50%;will-change:transform}
.lp-firma-logo > img{display:block;height:1.5em;width:auto;filter:drop-shadow(0 0 .6px rgb(255 255 255 / .35))}
.lp-firma-flecha{display:inline-block;line-height:1}
@media(hover:hover){.lp-firma:hover .lp-firma-texto,.lp-firma:hover .lp-firma-flecha{opacity:1}.lp-firma:hover .lp-firma-elev{transform:translateY(-1px) scale(1.03);filter:brightness(1.15)}}
.lp-firma:focus-visible .lp-firma-texto,.lp-firma:focus-visible .lp-firma-flecha{opacity:1}
.lp-firma:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.lp-firma:focus-visible .lp-firma-elev{transform:translateY(-1px) scale(1.03);filter:brightness(1.15)}
@media(prefers-reduced-motion:reduce){.lp-firma-texto,.lp-firma-flecha,.lp-firma-elev{transition:none}.lp-firma:hover .lp-firma-elev,.lp-firma:focus-visible .lp-firma-elev{transform:none}}

/* Botón flotante de WhatsApp y su aviso del 911 (v25, decisión 5 del dueño, 9 oct noche: "mantenerla… el efecto y todo, el brillo del WhatsApp, todo mantenerlo"): portado tal cual de 05-WEB (components.css y refinement.css: tamaño, posición, sombra, crecimiento y brillo verde al pasar, anillo de foco; aviso de cristal transparente que aparece al pasar, tocar o enfocar el botón, enlazado por aria-describedby, con el texto en blanco o en verde según lo que tenga detrás, recalculado al desplazar). Solo cambian la capa (z-index de esta página), la letra del aviso (de .68 a .76rem, con permiso del dueño) y su texto, más corto y con el mismo sentido */
.q-whatsapp-float{position:fixed;bottom:24px;right:20px;width:48px;height:48px;background:#25D366;color:#FFFFFF;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px #193d2a20;z-index:47;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,opacity .3s,visibility .3s;text-decoration:none}
.q-whatsapp-float:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.55);color:#FFFFFF}
.q-whatsapp-float:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;box-shadow:0 0 0 5px #193D2A}
.q-whatsapp-float svg{display:block;width:30px;height:30px}
.q-wa-note{position:fixed;right:20px;bottom:80px;z-index:47;margin:0;width:max-content;max-width:280px;padding:7px 11px;background:rgba(255,255,255,.92);color:#193D2A;font-size:.76rem;line-height:1.35;border-radius:12px;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 20px rgba(25,61,42,.18);text-align:right;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s,color .15s ease,text-shadow .15s ease,border-color .15s ease}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .q-wa-note.q-wa-note--oscuro{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);border-color:rgba(255,255,255,.4)}
  .q-wa-note{background:linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 100%);-webkit-backdrop-filter:blur(24px) saturate(1.8) brightness(1.08);backdrop-filter:blur(24px) saturate(1.8) brightness(1.08);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.18),0 8px 24px rgba(7,28,16,.22);text-shadow:0 1px 0 rgba(255,255,255,.4)}
  /* v25: con el texto en blanco (fondo oscuro detrás) el mismo cristal transparente atenúa un poco lo que tiene detrás en vez de aclararlo, para que el aviso se lea también delante de los brillos de la hélice del proceso y de las esferas de la estética (medido en la v25: sobre la hélice el fondo más claro bajo las letras daba 2,1:1 con el aclarado de 05-WEB). Revisión de la v25: el cristal sigue siendo el mismo, algo más lechoso con el texto verde (tinte blanco .62/.42 en vez de .34/.12) y algo más atenuado con el texto blanco (brillo .58 en vez de .78), para que el 5 % peor del fondo bajo las letras pase de AA en toda la página, también delante de la hélice, de las fotos y del vídeo de bienvenida (medido en 203 posiciones a 1440, 768, 390 y 360 px) */
  .q-wa-note.q-wa-note--oscuro{background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 100%);-webkit-backdrop-filter:blur(24px) saturate(1.5) brightness(.58);backdrop-filter:blur(24px) saturate(1.5) brightness(.58)}
}
.q-whatsapp-float:hover + .q-wa-note,.q-whatsapp-float:focus-visible + .q-wa-note,.q-whatsapp-float:active + .q-wa-note{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.q-wa-note.q-wa-note--aviso{opacity:1;visibility:visible;transform:none;transition-delay:0s} /* NUBE-PROPUESTAS, propuesta 6b: 2 s al abrir la página (main.js) */
@media(max-width:767px){
  .q-whatsapp-float{bottom:calc(88px + env(safe-area-inset-bottom,0px));width:44px;height:44px;right:14px} /* NUBE-PROPUESTAS, propuesta 6 (H12): 44 px, el mínimo recomendado para el dedo (antes 42) */
  .q-wa-note{right:14px;bottom:calc(138px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.q-wa-note,.q-whatsapp-float{transition:none}} /* revisión de la v25: con movimiento reducido el botón tampoco anima su crecimiento, como en 05-WEB (base.css deja las transiciones en .01ms) */

/* Barra fija inferior del móvil (v25, decisión 6 del dueño, 9 oct noche: "sí, también se puede quedar"): por debajo de 768 px, como en la web publicada, en cristal oscuro con dos píldoras: «Llamar ahora» (tel:) y «Pedir cita» (#cita); respeta el área segura, el pie lleva margen para que no lo tape, el WhatsApp y su aviso van por encima y la barra se oculta con el menú abierto y al imprimir */
.barra-movil{display:none}
@media(max-width:767px){
  .barra-movil{position:fixed;left:0;right:0;bottom:0;z-index:46;display:grid;grid-template-columns:1fr 1.2fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(14,28,21,.74);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-top:1px solid rgba(245,239,226,.14);box-shadow:0 -12px 32px -20px rgba(0,0,0,.7);transition:opacity .3s,visibility .3s}
  .barra-movil .btn{min-height:46px;width:100%;padding:10px 14px;font-size:.88rem;gap:8px}
  .barra-movil .btn svg{flex:none}
  .pie{padding-bottom:calc(40px + 66px + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* revisión de la v25: mientras el héroe del corazón está fijado (clase heroe-fijado en <html>, la pone el guion al desplazar), la barra inferior baja y se oculta, y el WhatsApp y su aviso bajan a su fila de escritorio (24 px del borde): esa pantalla ya lleva su propio «Pide tu primera cita» y así sus pastillas y su pista se ven enteras, con el corazón del mismo tamaño que en la v24 (con la barra encima, la fila «English & Español» y media fila de pastillas quedaban tapadas en la primera mitad de la fijación). Al salir del héroe vuelven las dos. Solo en vertical: en apaisado la barra no existe (ver abajo); el WhatsApp no baja por debajo de 340 px de ancho, donde la primera fila de pastillas llega a su columna */
@media(max-width:767px) and (min-height:481px){
  .barra-movil{transition:opacity .3s,visibility .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
  html.heroe-fijado .barra-movil{transform:translateY(100%);visibility:hidden;pointer-events:none}
}
@media(min-width:340px) and (max-width:767px) and (min-height:481px){
  .q-whatsapp-float{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,opacity .3s,visibility .3s,translate .35s cubic-bezier(.2,.8,.2,1)}
  .q-wa-note{transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s,color .15s ease,text-shadow .15s ease,border-color .15s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
  .q-whatsapp-float:hover + .q-wa-note,.q-whatsapp-float:focus-visible + .q-wa-note,.q-whatsapp-float:active + .q-wa-note{transition-delay:0s}
  html.heroe-fijado .q-whatsapp-float,html.heroe-fijado .q-wa-note{translate:0 64px}
}
/* Fusión con la estética D («página que se curva», #estetica-pagina): mientras su pantalla está fijada (clase pg-fijada en <html>, la pone su
   guion), lo mismo que en el héroe. Su texto llega hasta abajo de la pantalla fijada y la barra lo tapaba (a 390×844, la última línea; a 360×640 y
   a 375×548, también el WhatsApp, sobre una y dos líneas). Aquí a cualquier ancho: su texto deja libre la fila de abajo del WhatsApp */
/* NUBE-PULIDO-MOVIL (22 oct 2026, NUBE-REVISION-VISUAL P1-2): fuera el apartado de la barra y del WhatsApp con html.pg-fijada. Era del modo con
   el texto dentro de la pantalla fijada; en el teléfono la estética va suelta (A2) y solo se pega la tarjeta, ahora centrada entre la barra de
   arriba y la de abajo (estetica-pagina.css): la barra ya no tapa nada y no hay motivo para quitarla. Desde 768 px no hay barra de abajo */
/* NUBE-PROPUESTAS, propuesta 3 (H8): mientras se ve el bloque final (clase final-a-la-vista, la pone main.js), la barra baja como en el héroe
   fijado: ese bloque ya lleva «Llamar» y el número, y así no hay tres «Llamar» a la vez */
@media(max-width:767px) and (min-height:481px){
  html.final-a-la-vista .barra-movil{transform:translateY(100%);visibility:hidden;pointer-events:none}
  html.final-a-la-vista .q-whatsapp-float,html.final-a-la-vista .q-wa-note{translate:0 64px}
}
/* NUBE-BARRA-PIE (dueño, 22 oct 2026): al llegar al pie (clase pie-a-la-vista en <html>, la pone main.js) la barra baja y se desvanece, y
   vuelve al subir; el WhatsApp baja a su fila, dentro del margen de abajo del pie, sin pisar el «Built by». Ese margen se queda: quitarlo
   movería la página al llegar al final. Con movimiento reducido, sin transición (regla de abajo) */
@media(max-width:767px) and (min-height:481px){
  html.pie-a-la-vista .barra-movil{transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none}
  html.pie-a-la-vista .q-whatsapp-float,html.pie-a-la-vista .q-wa-note{translate:0 64px}
}
@media(prefers-reduced-motion:reduce){.barra-movil,.q-whatsapp-float,.q-wa-note{transition:none!important}}
/* revisión de la v25: teléfono apaisado (≤ 767 px de ancho y ≤ 480 de alto): la barra inferior ocuparía 66 de 360–375 px de alto y taparía los botones de la bienvenida; se oculta (la barra de arriba ya lleva «Llamar» y «Pedir cita» en el menú) y el WhatsApp, su aviso y la pausa vuelven a la fila de abajo, como en el escritorio; la bienvenida se compacta para que sus tres botones quepan en la pantalla */
@media(max-width:767px) and (max-height:480px){
  .barra-movil{display:none}
  .q-whatsapp-float{bottom:24px}
  .q-wa-note{bottom:74px}
  .video-pausa{bottom:23px}
  .pie{padding-bottom:40px}
  html{scroll-padding-bottom:0}
}
@media(max-height:480px){ /* también en los teléfonos grandes en apaisado (844×390, 932×430), donde los botones de la bienvenida ya quedaban fuera de la pantalla en la v24 */
  .bienvenida-contenido{padding-top:64px;padding-bottom:76px;gap:8px}
  .bienvenida .bienvenida-emblema{width:min(64px,18vw)}
  .bienvenida-lema{font-size:1.05rem;max-width:40ch}
  .bienvenida .acciones{width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
  .bienvenida .acciones .btn{width:auto;padding:8px 14px;font-size:.84rem;white-space:nowrap}
}
html.menu-abierto .barra-movil,html.menu-abierto .q-whatsapp-float,html.menu-abierto .q-wa-note{opacity:0;visibility:hidden;pointer-events:none}
@media print{.barra-movil,.q-whatsapp-float,.q-wa-note,.guia-fondo,.video-pausa,.toast,.q-motion-toggle{display:none!important}}
/* «Pausar movimiento»: con la clase q-motion-paused en <html> (la misma de 05-WEB, refinement.css) todas las animaciones CSS quedan quietas (orbes, latido, ECG, onda del mapa, anillo de la intro, cinta…), el cursor propio y el brillo se ocultan y la cortina de la intro no se desliza; el resto (vídeos, corazón, hélice, esferas, cinta, entradas, paralajes, estética D) lo para el guion */
html.q-motion-paused *,html.q-motion-paused *::before,html.q-motion-paused *::after{animation-play-state:paused!important}
html.q-motion-paused .cursor,html.q-motion-paused .brillo{opacity:0!important}
html.q-motion-paused .intro{transition:none}

/* Ventana de la Guía de Longevidad (v25, decisión 8 del dueño, 9 oct noche: "la guía de longevidad se queda… para captar los contactos"): el diálogo y el formulario de 05-WEB (#leadModal) con el diseño del prototipo; la abren el botón de la bienvenida, el enlace del pie, la intención de salida (armada a los 15 s, una vez por sesión) y ?modal=1. En el prototipo el envío no sale a la red (regla 7): se intercepta y se muestra un aviso */
.guia-fondo{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(6,14,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.guia-fondo.visible{opacity:1;visibility:visible;transition-delay:0s}
html.guia-abierta{overflow:hidden}
.guia-dialogo{color-scheme:light;--ink:#193D2A;--ink-2:rgba(25,61,42,.82);--line:rgba(25,61,42,.16);position:relative;width:min(580px,100%);max-height:calc(100vh - 32px);max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(26px,4vw,40px) clamp(20px,4vw,40px) clamp(22px,3vw,32px);border-radius:28px;background:linear-gradient(160deg,#FDFBF5,#F6F0E2);color:var(--ink);border:1px solid rgba(255,255,255,.85);box-shadow:0 40px 90px -30px rgba(0,0,0,.65),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5);transform:translateY(16px) scale(.985);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.guia-dialogo::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,75,.9),transparent);pointer-events:none}
.guia-fondo.visible .guia-dialogo{transform:none}
.guia-cerrar{position:absolute;top:12px;right:12px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(25,61,42,.2);background:rgba(255,255,255,.7);color:#193D2A;display:grid;place-items:center;cursor:pointer;transition:border-color .3s,background .3s}
.guia-cerrar svg{display:block;width:14px;height:14px} /* GUIA-LONGEVIDAD-ARREGLOS (dueño, 10 oct: "el símbolo de cerrar… no está centrado"): la × era el carácter &times; de la letra del cuerpo, cuya tinta queda 1 px por debajo del centro de su caja (1 px a 1440 densidad 1; 3,5 px del dispositivo a 390 densidad 3). Ahora es un trazo SVG simétrico en su caja de 14 px (tinta de 2 a 12 px con las puntas redondas: bordes en píxel entero a densidad 1, 2 y 3), centrado por la rejilla en los 42 px interiores (botón de 44 px, objetivo táctil mínimo, revisión de la ronda 1): centro exacto a cualquier densidad */
.guia-cerrar:hover{border-color:rgba(138,111,51,.7);background:#fff}
.guia-simbolo{width:36px;height:auto;margin:0 auto 14px}
.guia-titulo{font-size:clamp(1.45rem,3.4vw,1.85rem);line-height:1.2;text-align:center;margin:0 auto 10px;max-width:24ch;outline:none}
.guia-lead{text-align:center;color:var(--ink-2);font-size:.95rem;margin-bottom:14px}
.guia-form{display:grid;gap:12px}
.guia-campo{display:grid;gap:6px}
.guia-campo label,.guia-idioma-titulo{font:600 .8rem/1.3 var(--sans);color:#193D2A}
.guia-campo input{width:100%;min-height:48px;padding:12px 16px;border-radius:14px;border:1px solid rgba(25,61,42,.22);background:rgba(255,255,255,.82);font:500 .95rem var(--sans);color:#193D2A;transition:border-color .25s,box-shadow .25s}
.guia-campo input:focus-visible,.guia-consentimiento input:focus-visible,.guia-idioma-botones button:focus-visible,.guia-cerrar:focus-visible{outline:2px solid #8A6F33;outline-offset:2px}
.guia-campo input:focus{border-color:#8A6F33;box-shadow:0 0 0 4px rgba(201,162,75,.18)}
.guia-idioma{display:grid;gap:8px;padding:12px 14px;border-radius:16px;border:1px solid rgba(25,61,42,.12);background:rgba(255,255,255,.55)}
.guia-idioma-titulo{margin:0} /* sin el rótulo «Detectado según tu idioma» (dueño, 10 oct): el idioma de la página ya viene marcado y basta el título */
.guia-idioma-botones{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:999px;background:rgba(25,61,42,.06)}
.guia-idioma-botones button{min-height:44px;border-radius:999px;border:1px solid transparent;background:transparent;color:#193D2A;font:600 .85rem var(--sans);cursor:pointer;transition:background .25s,color .25s,border-color .25s} /* 44 px de alto: objetivo táctil mínimo (revisión de la ronda 1; antes 40) */
.guia-idioma-botones button[aria-pressed="true"]{background:#193D2A;color:#F5EFE2;box-shadow:0 6px 16px -8px rgba(25,61,42,.6)}
@media(hover:hover){.guia-idioma-botones button[aria-pressed="false"]:hover{background:rgba(255,255,255,.8);border-color:rgba(25,61,42,.14)}}
/* alto contraste (Windows): el fondo del botón elegido se pierde; Highlight lo marca con los colores del sistema */
@media(forced-colors:active){.guia-idioma-botones button{border-color:ButtonText}.guia-idioma-botones button[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}}
.guia-consentimiento{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:14px;border:1px solid rgba(176,138,58,.42);background:rgba(255,255,255,.7);font-size:.84rem;line-height:1.5;color:#193D2A;cursor:pointer}
.guia-consentimiento input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:#193D2A;cursor:pointer}
.guia-consentimiento a{color:#5A4720;text-decoration:underline;text-underline-offset:2px}
.guia-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.guia-enviar{max-width:none;margin-top:4px;cursor:pointer;border:0}
.guia-aviso{padding:12px 16px;border-radius:14px;border:1px solid rgba(138,111,51,.6);background:rgba(201,162,75,.12);color:#193D2A;font-size:.88rem;line-height:1.5;text-wrap:pretty}
.guia-aviso span{transition:opacity .3s ease}
.guia-aviso.vacio span{visibility:hidden;opacity:0} /* el texto entra un instante después de mostrarse la vista de éxito: la región viva (role=status) ya está en el árbol de accesibilidad y el lector de pantalla lo anuncia; visibility, y no vaciar el texto, para que el botón no salte */
/* Tras un envío válido (GUIA-LONGEVIDAD-ARREGLOS): la ventana cambia el formulario por «¡Tu guía está lista!», el aviso del prototipo y el botón del PDF en el idioma elegido, como la vista de éxito de 05-WEB (#leadSuccessView) */
.guia-paso[hidden],.guia-exito[hidden]{display:none}
.guia-consentimiento[hidden]{display:none} /* NUBE-PROPUESTAS, propuesta 4 (H7): la casilla de SMS/WhatsApp, solo con teléfono (main.js) */
.guia-exito{display:grid;gap:16px;justify-items:center;text-align:center;padding-bottom:4px}
.guia-exito .guia-titulo{margin-bottom:0}
.guia-exito>.guia-aviso,.guia-exito>.guia-pdf{justify-self:stretch;max-width:none} /* el aviso y el botón, del mismo ancho */
.guia-pdf{white-space:normal;text-align:left;line-height:1.3}
.guia-pdf b{flex:none}
.guia-pdf:focus-visible{outline:2px solid #8A6F33;outline-offset:3px}
.guia-disclaimer{margin-top:14px;font-size:.78rem;line-height:1.5;color:var(--ink-2);text-align:center}
@media(max-width:560px){.guia-fondo{padding:10px}.guia-dialogo{max-height:calc(100vh - 20px);max-height:calc(100svh - 20px);border-radius:24px}}
@media(prefers-reduced-motion:reduce){.guia-fondo,.guia-dialogo,.guia-aviso span{transition:none}}

/* Intro de marca (cortina) */
html.bloqueado{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;background:radial-gradient(900px circle at 50% 45%,#1C3A2B,var(--bg) 70%);display:grid;place-items:center;align-content:center;gap:26px;transition:transform 1.1s cubic-bezier(.76,0,.24,1)}
.intro.fuera{transform:translateY(-101%);pointer-events:none}
.intro-logo{--qms-d:76.8px} /* logo nuevo (10 oct): símbolo de 78 px en oro plano. NUBE-INTRO-SIN-ARCO (22 oct 2026, dueño: «al refrescar el logo se ve roto»): fuera el arco que giraba alrededor del símbolo, que visto quieto parecía un trozo del anillo del logo suelto; el logo va solo, con la separación de la marca entre símbolo y nombre, y la línea de progreso debajo hace de indicador de carga */
.intro-barra{width:160px;height:1px;background:rgba(245,239,226,.12);overflow:hidden}
.intro-barra i{display:block;height:100%;width:0;background:#C9A24B;transition:width .4s}

/* Cursor propio */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;border:1.5px solid rgba(176,138,58,.95);border-radius:50%;pointer-events:none;z-index:90;transform:translate(-50%,-50%);display:grid;place-items:center;transition:width .35s,height .35s,background .35s,border-color .35s,opacity .4s;opacity:0;will-change:left,top}
.cursor span{font:700 .55rem var(--sans);letter-spacing:.14em;color:#5F4A1F;opacity:0;transition:opacity .3s;text-transform:uppercase}
.cursor.sobre{width:56px;height:56px;background:rgba(232,206,140,.12);border-color:rgba(232,206,140,.5)}
.cursor.sobre-3d{width:76px;height:76px;background:rgba(255,255,255,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cursor.sobre-3d span{opacity:1}
@media(hover:none){.cursor{display:none}}

/* Cinta dorada */
.cinta{overflow:hidden;position:relative;padding-block:20px;background:linear-gradient(90deg,var(--bg),rgba(36,86,64,.35),var(--bg));-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cinta-pista{display:flex;gap:56px;width:max-content;white-space:nowrap;will-change:transform}
.cinta-pista span{font:600 .76rem var(--sans);letter-spacing:.32em;text-transform:uppercase;color:rgba(245,239,226,.84);display:flex;align-items:center;gap:40px;padding-right:40px}
.cinta-pista span::after{content:"";width:24px;height:24px;background:url(../img/simbolo-favicon-color.svg) center/contain no-repeat}
.cinta::before,.cinta::after{content:"";position:absolute;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(232,206,140,.85),transparent);pointer-events:none}
.cinta::before{top:0}.cinta::after{bottom:0}

/* Títulos palabra a palabra */
.pal{display:inline-block;will-change:transform,opacity;transform-origin:50% 100%}
#why-quintana h2{font-size:clamp(2.3rem,4.8vw,4.1rem)}
.heroe-contenido,.heroe-tarjeta{will-change:transform}

.q-nowrap{white-space:nowrap}

/* Reveal */
.rev,.rev-grupo > *{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .latido,.bajar i,.mapa-pin::before,.mapa-pin::after,.orbe,.heroe-video{animation:none}
  .btn,.tarjeta,.flecha{transition:none}
  .btn-oro::after,.intro{transition:none} /* revisión de la v25: sin el barrido de luz del botón de cita ni el deslizamiento de la cortina (con movimiento normal, igual que antes) */
}

/* ---- Póster de la bienvenida (fotograma 0 exacto; DECISIONS «2026-10-09 (noche, 10)»): fondo del <video> y del
   plan B sin vídeo, con JPEG de reserva primero e image-set() con type() después (AVIF, WebP y JPEG a 1920,
   NUBE-VIDEO-BIENVENIDA, 18 oct 2026); el acercamiento al bajar va en
   la variable --bienvenida-escala de la sección (la siguen los dos <video> del paso al nítido) y .entrando es
   el fundido de ese paso. En el teléfono en vertical, el póster del corte 540×900 ---- */
.bienvenida.sin-video{background:#0E1C15 url(../img/cristal-bienvenida2-poster-1920.jpg) center/cover no-repeat;background-image:image-set(url(../img/cristal-bienvenida2-poster-1920.avif) type("image/avif"),url(../img/cristal-bienvenida2-poster-1920.webp) type("image/webp"),url(../img/cristal-bienvenida2-poster-1920.jpg) type("image/jpeg"))}
.bienvenida-video::-webkit-media-controls{display:none!important}
.bienvenida-video{transform:scale(var(--bienvenida-escala,1));transition:opacity .4s ease}.bienvenida-video.entrando{opacity:0}
@media(max-width:700px) and (max-aspect-ratio:3/5){.bienvenida.sin-video{background-image:url(../img/cristal-bienvenida2-poster-movil.jpg);background-image:image-set(url(../img/cristal-bienvenida2-poster-movil.avif) type("image/avif"),url(../img/cristal-bienvenida2-poster-movil.webp) type("image/webp"),url(../img/cristal-bienvenida2-poster-movil.jpg) type("image/jpeg"))}}
/* NUBE-PORTADA (revisión de rendimiento del 17 oct, hallazgo 6): con JS el póster del <video> lo pone bienvenida.js con la URL con huella, la
   misma de la precarga, antes de retirar la cortina; aquí, sin huella, solo sin JS (si no, el póster bajaba dos veces) */
@media (scripting:none){.bienvenida-video{background:#0E1C15 url(../img/cristal-bienvenida2-poster-1920.jpg) center/cover no-repeat;background-image:image-set(url(../img/cristal-bienvenida2-poster-1920.avif) type("image/avif"),url(../img/cristal-bienvenida2-poster-1920.webp) type("image/webp"),url(../img/cristal-bienvenida2-poster-1920.jpg) type("image/jpeg"))}}
@media (scripting:none) and (max-width:700px) and (max-aspect-ratio:3/5){.bienvenida-video{background-image:url(../img/cristal-bienvenida2-poster-movil.jpg);background-image:image-set(url(../img/cristal-bienvenida2-poster-movil.avif) type("image/avif"),url(../img/cristal-bienvenida2-poster-movil.webp) type("image/webp"),url(../img/cristal-bienvenida2-poster-movil.jpg) type("image/jpeg"))}}

/* ---- Los style="" del marcado del prototipo, como clases (plantilla.html: fotos de temas, comparación, ficha de la sede, perfil y filtro SVG) ---- */
.foto-tema.ratio-4-3{aspect-ratio:4/3}
.foto-tema.ratio-21-7{grid-column:1/-1;aspect-ratio:21/7}
.foto-tema.ratio-4-3 img,.foto-tema.ratio-21-7 img{aspect-ratio:auto}
.enfoque-50-60{object-position:50% 60%}
.enfoque-40-60{object-position:40% 60%}
.enfoque-50-58{object-position:50% 58%}
.ficha-sede{margin-top:28px}
.ficha .ancho-completo{grid-column:1/-1}
.perfil-nombre{margin-top:14px}
.svg-oculto{position:absolute}

/* ---- Selector «Abrir con» de la web (.q-mapas*, components.css; lo crea main.js) vestido con el cristal del diseño
   nuevo, como el del prototipo (.mapas): cristal oscuro, borde oro, letras marfil; en el teléfono, la hoja igual.
   Solo en las páginas con body.q-cristal. El enlace «Cambiar app de mapas» de NUBE-WEB-HOY hereda el color de la
   sección (marfil) ---- */
.q-cristal .q-mapas-panel{background:rgba(14,28,21,.88);border:1px solid var(--line-gold);border-radius:18px;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 70px -24px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.12);padding:8px}
.q-cristal .q-mapas-cab{border-bottom-color:rgba(245,239,226,.14)}
.q-cristal .q-mapas-titulo{color:rgba(245,239,226,.5)}
.q-cristal .q-mapas-dir{color:rgba(245,239,226,.74)}
.q-cristal .q-mapas-op{color:#F5EFE2}
.q-cristal .q-mapas-flecha{color:#E8CE8C}
.q-cristal .q-mapas-op:hover,.q-cristal .q-mapas-op:focus-visible{background:rgba(245,239,226,.11);color:#F5EFE2}
.q-cristal .q-mapas-op:focus-visible{outline-color:var(--line-gold)}
.q-cristal .q-mapas.is-sheet .q-mapas-panel{border-radius:22px;padding:10px}
.q-cristal .q-mapas.is-sheet .q-mapas-cancelar{background:rgba(14,28,21,.88);border:1px solid rgba(245,239,226,.14);color:rgba(245,239,226,.74);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
.q-cristal .q-mapas.is-sheet .q-mapas-cancelar:hover{background:rgba(22,52,40,.92)}
.q-cristal .q-mapas-fondo{background:rgba(8,18,13,.42)}

/* ---- Sin JS (en el prototipo, dos <noscript><style>): la cortina no se retiraría, y ni «Pausar movimiento» ni la pausa del vídeo tienen guion; sin JS tampoco hay vídeo (solo el póster). Va al final para ganar a .intro y .video-pausa. NUBE-PORTADA puede conservar además los <noscript><style> del prototipo para los navegadores sin (scripting) ---- */
@media (scripting:none){.intro,.q-motion-toggle,.video-pausa{display:none}}

/* ============================================================
   NUBE-PORTADA (16 oct 2026): lo que la portada necesita además del prototipo, porque convive con las hojas de hoy
   (base.css pinta h1–h4 y a:hover en verde oscuro con la misma especificidad de elemento: aquí se hereda la tinta),
   usa el selector de idioma de la web (.q-lang-btn: generar-es.mjs escribe la píldora del otro idioma), la
   ventana de la guía de initLeadModal (clase is-visible en vez de visible), las cautelas de la estética (aest.t1.i3 y
   aest.t3.i2) y el panel de biomarcadores de la portada publicada (bio.*) con su rótulo de ejemplo.
   ============================================================ */
:where(.q-cristal) :is(h1,h2,h3,h4){color:inherit}
:where(.q-cristal) a:hover{color:inherit}
.q-cristal .q-skip-link{z-index:10001} /* por encima de la cortina de entrada */
/* Selector de idioma: una sola píldora como el botón del prototipo (.idioma), con el otro idioma y enlace real a la misma página en él; el idioma de la página no se muestra (dueño, DECISIONS «2026-10-18 (3)») */
.nav .q-lang-switch{display:inline-flex;gap:4px;padding:0;border:0;background:none;box-shadow:none}
.nav .q-lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:0;background:none;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:8px 11px;font:600 .74rem/1 var(--sans);letter-spacing:.12em;cursor:pointer;text-decoration:none;transition:.3s;box-shadow:none}
.nav:not(.sobre-claro) .q-lang-btn{color:var(--ink)} /* NUBE-PROPUESTAS, propuesta 7: tinta plena sobre fondo oscuro (el vídeo de la bienvenida a 375 dejaba 4,25:1 con --ink-2) */
.nav .q-lang-btn:hover,.nav .q-lang-btn:focus-visible{border-color:var(--line-gold);color:var(--gold-2);background:none}
.nav.sobre-claro .q-lang-btn{color:#193D2A;border-color:rgba(25,61,42,.3)}
.nav.sobre-claro .q-lang-btn:hover,.nav.sobre-claro .q-lang-btn:focus-visible{color:#6E5726;border-color:rgba(138,111,51,.62)}
/* Ventana de la guía: initLeadModal (main.js) la abre con is-visible y aria-hidden */
.guia-fondo.is-visible{opacity:1;visibility:visible;transition-delay:0s}
.guia-fondo.is-visible .guia-dialogo{transform:none}
/* Ventana sencilla (decisión del dueño «VENTANA SÍ», DECISIONS 2026-10-17 (4)): tarjeta de vidrio claro, el de las secciones marfil, casi opaco porque el fondo de la página queda oscurecido, con filete de oro plano (sin el degradado de la línea de arriba); en el éxito, «pantalla completa» es un enlace, no un segundo botón */
.guia-dialogo{background:linear-gradient(160deg,rgba(253,251,245,.9),rgba(246,240,226,.84));backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%);border:1px solid #C9A24B;box-shadow:0 40px 90px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.95)}
.guia-dialogo::after{content:none}
.guia-lead{max-width:44ch;margin-inline:auto;text-wrap:balance}
.guia-exito .guia-lead{margin-bottom:0}
.guia-abrir{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:999px;font:600 .92rem/1.3 var(--sans);color:#193D2A;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.guia-abrir:hover{color:#5A4720}
.guia-abrir:focus-visible{outline:2px solid #8A6F33;outline-offset:3px}
/* Botón de la ventana: la píldora de oro de la página (.btn-oro) en su versión sobre claro, como en las secciones marfil; ocupa el ancho del formulario */
.guia-dialogo{--oro-tinta:#6E5726;--oro-borde:rgba(138,111,51,.62);--oro-fondo:rgba(255,255,255,.55);--oro-brillo:1}
.guia-enviar.btn-oro,.guia-exito>.guia-pdf.btn-oro{width:100%;min-height:52px;border:1px solid var(--oro-borde);font-size:1rem;justify-content:center;text-align:center}
/* H2 (NUBE-AUD-CONVERSION, 17 oct): el botón de envío quedaba 30–355 px por debajo de la pantalla al abrir. Va en .guia-pie, pegajosa al borde inferior de la ventana (que es la que desplaza), sobre el mismo vidrio y con un filete de oro sutil; al llegar al final vuelve a su sitio, sin tapar el último campo. scroll-padding-bottom: al enfocar un campo con el teclado, la ventana lo deja por encima de la franja */
.guia-dialogo{scroll-padding-bottom:112px} /* franja (76) + relleno inferior de la ventana (hasta 32) */
.guia-pie{position:sticky;bottom:0;z-index:2;margin:0 calc(-1 * clamp(20px,4vw,40px));padding:10px clamp(20px,4vw,40px) 12px;background:linear-gradient(180deg,rgba(250,246,236,.86),rgba(247,241,228,.97));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(201,162,75,.42)}
.guia-pie .guia-enviar{margin-top:0}
/* H3 (NUBE-AUD-CONVERSION, 17 oct): en el teléfono la píldora del corazón quedaba bajo la barra fija; el bloque reserva el alto de la barra (la coreografía deja el texto quieto y opaco mientras la sección está fijada: motion-cristal.js) */
@media(max-width:767px){.heroe-contenido{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
/* Cautelas de los tratamientos estéticos bajo su tarjeta (regla 2: no prometer resultados) */
.cautelas{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.cautelas li{position:relative;padding-left:16px;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.cautelas li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--gold-2)}
/* Panel de biomarcadores (cifras de ejemplo con su rótulo) y los cuatro paneles de análisis, en Prevención */
.biomarcadores{margin-top:18px;padding:22px 24px;display:grid;gap:14px}
.bio-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bio-estado{display:inline-flex;align-items:center;gap:10px;font:600 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.bio-muestra{font:600 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.bio-ecg{width:100%;height:34px;display:block;opacity:.8}
.bio-ecg path{fill:none;stroke:var(--gold-2);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.bio-metricas{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:12px}
.bio-metricas div{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);min-width:0}
.bio-metricas dt{font-size:.74rem;color:var(--ink-3);letter-spacing:.04em}
.bio-metricas dd{margin:4px 0 0;font:400 1.6rem/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bio-metricas dd small{font:600 .7rem var(--sans);color:var(--ink-3);margin-left:6px;letter-spacing:.04em}
.bio-rejilla{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px}
.chips-bio li{padding:7px 12px;font-size:.76rem}
/* «Cambiar app de mapas» (components.css) dentro de la ficha de la sede: a la izquierda, con la tinta de la sección */
.q-cristal .ficha .q-mapas-cambiar{width:auto;margin:10px 0 0;padding:8px 0;text-align:left;font-size:.8rem;color:var(--ink-2)}
.q-cristal .ficha .q-mapas-cambiar:hover,.q-cristal .ficha .q-mapas-cambiar:focus-visible{color:var(--ink)}
/* NUBE-PORTADA: en el teléfono la dirección del mapa ocupa dos líneas y el crédito de OpenStreetMap quedaba encima del texto; arriba a la derecha queda libre y legible */
@media(max-width:767px){.mapa-credito{top:10px;bottom:auto}}

/* ---- Páginas interiores (NUBE-PORTADA; decisión 9 del dueño, DECISIONS «2026-10-09 (noche, 4)»): /about, /contact y
   /primary-care con su contenido, sus hojas y sus URL de hoy, y del diseño nuevo la cabecera de cristal en su estado claro,
   el menú del móvil, el pie y la barra inferior. <body class="quintana q-interior">, sin q-cristal: los resets del diseño
   nuevo se aplican solo dentro de esas cuatro piezas y con especificidad de elemento, como en la portada ---- */
:where(.q-interior .nav,.q-interior .panel,.q-interior .pie,.q-interior .barra-movil),:where(.q-interior .nav,.q-interior .panel,.q-interior .pie,.q-interior .barra-movil) *,:where(.q-interior .nav,.q-interior .panel,.q-interior .pie,.q-interior .barra-movil) *::before,:where(.q-interior .nav,.q-interior .panel,.q-interior .pie,.q-interior .barra-movil) *::after{box-sizing:border-box}
:where(.q-interior .nav,.q-interior .panel,.q-interior .pie,.q-interior .barra-movil) a{color:inherit;text-decoration:none}
:where(.q-interior .nav,.q-interior .panel,.q-interior .pie,.q-interior .barra-movil) img{max-width:100%;display:block}
:where(.q-interior .nav,.q-interior .panel,.q-interior .pie,.q-interior .barra-movil) button{font:inherit;color:inherit}
:where(.q-interior .pie) :is(h2,h4,p,ul){margin:0}
:where(.q-interior .pie) ul{list-style:none;padding:0}
.q-interior :is(.nav,.panel,.pie,.barra-movil){font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.q-interior .pie{color:var(--ink)}
.q-interior .nav{position:sticky} /* como la cabecera de hoy (.q-header, sticky): el contenido empieza debajo, sin hueco que calcular */
.q-interior .nav-enlaces a[aria-current="page"]{color:#193D2A;font-weight:600}
.q-interior .nav-enlaces a[aria-current="page"]::after{right:0;background:#6E5726}
.q-interior .panel a[aria-current="page"]{color:var(--gold-2)}
/* el pie de las interiores no lleva «Áreas médicas» (no la tienen hoy): el horario sube a su columna, como en el pie publicado */
.pie-int.pie-sin-areas{grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.2fr);grid-template-areas:"marca nav horario contacto"}
@media(max-width:1200px){.pie-int.pie-sin-areas{grid-template-columns:1fr 1fr;grid-template-areas:"marca nav" "horario contacto"}}
@media(max-width:560px){.pie-int.pie-sin-areas{grid-template-areas:"marca marca" "nav nav" "contacto contacto" "horario horario"}}
.q-interior .pie-contacto p a{color:var(--gold-2)!important} /* ftr.phone_line trae style="color: var(--q-gold-light)" en línea; aquí manda el oro del pie nuevo */
:where(.q-cristal .pie,.q-interior .pie) p{color:inherit} /* base.css da color oscuro a todo <p> (#1C2420); en el pie, de la portada y de las interiores, manda la tinta clara de .pie-int y .pie-legal (preauditoría del 17 oct: en la portada salía a 1,11:1) */
.guia-fondo:not(.is-visible){pointer-events:none} /* NUBE-PORTADA: mientras se desvanece al cerrar, el fondo de la guía ya no recoge clics (antes, un segundo toque en el botón durante esos 0,35 s caía en el fondo y no abría nada) */
/* NUBE-PORTADA: los enlaces de las tarjetas que tenía la portada publicada («Learn more», «Explore», «Inquire»; claves common.*,
   INTEGRACION §4) vuelven en la flecha de cada tarjeta, sin cambiar el aspecto: la tarjeta entera es el enlace (::after) y el
   lector de pantalla oye «Conocer más: Atención primaria», como antes */
.flecha-enlace{color:inherit;text-decoration:none}
.flecha-enlace::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2}
.flecha-enlace .flecha{display:inline-block} /* la flecha se desplaza al pasar por la tarjeta (.tarjeta:hover .flecha); el enlace no lleva transform: si lo llevara, su ::after se mediría contra él y dejaría de cubrir la tarjeta */
.tarjeta:has(.flecha-enlace){cursor:pointer}
.tarjeta:has(.flecha-enlace:focus-visible){outline:2px solid var(--gold-2);outline-offset:3px}
.marfil .tarjeta:has(.flecha-enlace:focus-visible){outline-color:#6E5726}
.flecha-enlace:focus-visible{outline:none}
/* «Leer perfil completo» bajo la biografía (common.read_profile → /about, como en la portada publicada) */
.perfil-enlace{margin-top:18px}
.perfil-enlace a{color:#6E5726;font-weight:600;text-decoration:underline;text-decoration-color:rgba(138,111,51,.45);text-underline-offset:4px;transition:text-decoration-color .3s}
.perfil-enlace a:hover,.perfil-enlace a:focus-visible{text-decoration-color:currentColor}
.perfil-enlace a:focus-visible{outline:2px solid #6E5726;outline-offset:3px;border-radius:2px}
/* NUBE-PORTADA, revisión de textos del 17 oct (condición 3 de ESTETICA-D-WEB.md §3; s. 456.072(1)(m)): ninguna pantalla con el
   retrato de la estética D y la línea «Una evaluación clínica con Onel…» (comparison.b.1) a la vez. Aire marfil al final de
   #comparison, no dentro de #aesthetics, para no mover el progreso de la hoja (estetica-pagina.js lo mide desde el borde de la
   sección). Lo que hace falta crece con el alto de la pantalla: medido a 1440×900, 1280×720, 1024×768, 768×1024, 390×844, 375×812 y 375×667 */
#comparison{padding-bottom:calc(clamp(72px,10vw,140px) + max(0px,100vh - 600px));padding-bottom:calc(clamp(72px,10vw,140px) + max(0px,100svh - 600px))}
@media(max-width:767px){#comparison{padding-bottom:calc(clamp(72px,10vw,140px) + max(0px,100vh - 560px));padding-bottom:calc(clamp(72px,10vw,140px) + max(0px,100svh - 560px))}}
@media(min-width:768px) and (max-width:1199px){#comparison{padding-bottom:calc(clamp(72px,10vw,140px) + max(0px,100vh - 460px));padding-bottom:calc(clamp(72px,10vw,140px) + max(0px,100svh - 460px))}}
/* NUBE-HUECO-ESTETICA (dueño, 18 oct 2026, DECISIONS «2026-10-18 (4)»: «aquí hay un espacio vacío innecesario»): con la escena fijada
   (desde 768 px, con movimiento y con JS) ese aire de casi una pantalla sobra. La condición 3 la cumple ahí estetica-pagina.js: la tarjeta
   de la hoja no se ve hasta que comparison.b.1 ha salido entera por arriba (--pg-ver, estetica-pagina.css). En el teléfono, con
   movimiento reducido y sin JS, el aire de arriba sigue igual. 80 px: .marfil recorta (overflow:hidden) y la sombra de las tarjetas
   (0 36px 70px -36px) necesita ese espacio para desvanecerse; medido en la unión bajo las tarjetas, 26 niveles de salto con 24 px,
   2,5 con 72 y en torno a 1 con 80 */
@media(min-width:768px) and (prefers-reduced-motion:no-preference) and (scripting:enabled){#comparison{padding-bottom:80px}}
/* NUBE-PORTADA (revisión de rendimiento del 17 oct, hallazgo 1, alta): si motion-cristal.js no llega (red caída a mitad, bloqueador, error), la cortina
   se retira sola a los 6 s; con el guion, retirarIntro() la quita antes (.fuera) y este respaldo no actúa. Corre aunque la pausa general esté puesta */
@keyframes intro-respaldo{to{transform:translateY(-101%);visibility:hidden}}
.intro{animation:intro-respaldo .01s linear 6s forwards}
.intro.fuera{animation:none}
html.q-motion-paused .intro:not(.fuera){animation-play-state:running!important}
/* NUBE-PORTADA: sin JS, los vídeos perezosos (póster en data-poster o data-cartel, motion-cristal.js initPosteres) enseñan su póster de fondo */
@media (scripting:none){video[data-poster*="cristal-adn-poster"]{background:url(../img/cristal-adn-poster.jpg) center/cover no-repeat}#esferasVideo{background:url(../img/cristal-esferas-poster.jpg) center/cover no-repeat}.sede .tras-video{background:url(../img/cristal-gotas-poster.jpg) center/cover no-repeat}}
/* NUBE-NITIDEZ-FONDOS (22 oct 2026): el póster de las esferas y el de las gotas van de fondo del vídeo, como el de la ola, para que el navegador
   elija tamaño y formato: 1280×720 en pantallas pequeñas; 1920×1080 y 2560×1440 (fotograma 0 escalado con IA, Topaz) con las mismas consultas
   que sus vídeos (NITIDO en motion-cristal.js). Solo cuando la sección se acerca (.con-cartel, initPosteres), para no bajarlos al cargar la página */
#esferasVideo.con-cartel{background:url(../img/cristal-esferas-poster.jpg) center/cover no-repeat}
@media (min-width: 1301px), (min-width: 701px) and (min-resolution: 1.5dppx){#esferasVideo.con-cartel{background-image:url(../img/cristal-esferas-poster-1920.jpg);background-image:image-set(url(../img/cristal-esferas-poster-1920.avif) type("image/avif"),url(../img/cristal-esferas-poster-1920.webp) type("image/webp"),url(../img/cristal-esferas-poster-1920.jpg) type("image/jpeg"))}}
@media (min-width: 1401px) and (min-resolution: 1.5dppx), (min-width: 2101px){#esferasVideo.con-cartel{background-image:url(../img/cristal-esferas-poster-2560.jpg);background-image:image-set(url(../img/cristal-esferas-poster-2560.avif) type("image/avif"),url(../img/cristal-esferas-poster-2560.webp) type("image/webp"),url(../img/cristal-esferas-poster-2560.jpg) type("image/jpeg"))}}
.sede .tras-video.con-cartel{background:url(../img/cristal-gotas-poster.jpg) center/cover no-repeat}
@media (min-width: 1301px), (min-width: 701px) and (min-resolution: 1.5dppx){.sede .tras-video.con-cartel{background-image:url(../img/cristal-gotas-poster-1920.jpg);background-image:image-set(url(../img/cristal-gotas-poster-1920.avif) type("image/avif"),url(../img/cristal-gotas-poster-1920.webp) type("image/webp"),url(../img/cristal-gotas-poster-1920.jpg) type("image/jpeg"))}}
@media (min-width: 1401px) and (min-resolution: 1.5dppx), (min-width: 2101px){.sede .tras-video.con-cartel{background-image:url(../img/cristal-gotas-poster-2560.jpg);background-image:image-set(url(../img/cristal-gotas-poster-2560.avif) type("image/avif"),url(../img/cristal-gotas-poster-2560.webp) type("image/webp"),url(../img/cristal-gotas-poster-2560.jpg) type("image/jpeg"))}}
.marfil .subtitulo{color:#5E4A1F} /* veredicto de NUBE-AUDITOR del 17 oct, baja 6: con #6E5726 daba 4,49:1 sobre el fondo real de #provider a 1440 */

/* ---- NUBE-PORTADA, revisión de accesibilidad del 17 oct (informes/2026-10-17-NUBE-REV-ACCESIBILIDAD-informe.md) ---- */
/* M3–M7: contraste de los textos pequeños, cejillas, entradillas y chips sobre su fondo real (hoja medida en el informe) */
.marfil,.heroe.claro,.pantalla-liquida .cta{--ink-3:rgba(25,61,42,.82);--ink-2:rgba(25,61,42,.9);--gold-2:#5F4A1F}
/* NUBE-CONTRASTE-PORTADA (dueño, 22 oct 2026: «arreglar todo» tras NUBE-CONTRASTE-REPASO): donde el fondo de detrás (orbes, hélice,
   el frasco verde) baja el contraste, la tinta plena o el oro más oscuro de las interiores; el resto de las secciones marfil no cambia */
.marfil .num{color:#3F3114} /* «03/04» de #ecosystem y #longevity: con #6E5726 daban 3,2–4,4:1 */
#longevity .bio-rejilla p{color:var(--ink)} /* tiroides y deficiencias: con la tinta al 90 % daban 4,1–4,3:1 */
.sede .ficha dt{color:var(--ink)} /* #location: las etiquetas de 10,6 px al 82 % daban 3,9–4,5:1 */
.sede .cejilla{color:#3F3114} /* y la cejilla en #5F4A1F, 3,9:1 sobre el orbe dorado: el oro oscuro de las cejillas de las interiores */
:root{--ink-3:rgba(245,239,226,.66)}
.marfil .chips-oro li{color:#3F3114}
#faq .lead{color:#193D2A}
#faq .cejilla,#pricing .cejilla{color:#3F3114} /* #4A3A18 en el informe; #3F3114 para el margen que pedía sobre la parte oscura del velo de #faq */
.mapa-credito{color:#193D2A;font-size:.68rem} /* crédito obligatorio de la licencia ODbL, legible */
#why-quintana .num{color:var(--gold-2)}
.q-cristal .q-mapas-titulo{color:rgba(245,239,226,.74)}
/* M2: la tarjeta 3D con el foco dentro se ve entera aunque su tramo de la animación no haya llegado */
.paso-est:focus-within{opacity:1!important;filter:none!important}
/* M8: a 320 px la barra cabe entera (antes el botón del menú quedaba 9 px fuera) */
@media(max-width:360px){.nav-int{gap:8px}.nav-acciones{gap:6px}.nav .q-lang-btn{padding:8px 7px}}
/* M9: teléfono y correo de la llamada final con 24 px de objetivo táctil sin mover la línea */
.cta .nota a{padding-block:6px}
/* B1: los títulos de columna del pie son h2 (antes h4 tras un h2) con el mismo aspecto */
.pie .pie-h{margin:0;font:700 .76rem/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.pie-contacto .pie-h + p,.pie-horario .pie-h + p{margin-top:-2px}
/* B4: al tabular en el teléfono, lo enfocado no queda bajo la barra inferior ni el botón de WhatsApp */
@media(max-width:767px){html{scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
/* NUBE-AUD-QA P2-1 (17 oct): base.css pone scroll-behavior:smooth en <html>, y con Lenis activo cada fotograma de su desplazamiento arrancaba una animación nativa nueva: las anclas tardaban ~3 s y hasta el salto directo se deslizaba. Regla que pide Lenis: con él en marcha, el desplazamiento programado es inmediato y la suavidad la pone Lenis (solo la portada lo carga) */
html.lenis{scroll-behavior:auto!important} /* NUBE-ANCLA-CARGA (23 oct 2026): era html.lenis.lenis-smooth, pero Lenis 1.1 solo pone lenis-smooth mientras desplaza; en reposo <html> volvía a scroll-behavior:smooth y ScrollTrigger.refresh(), que pone la página a 0 para medir, medía antes de que el desplazamiento animado moviera nada: con la portada abierta en un ancla (o desplazada al recalcular) los tramos de arriba quedaban con start/end negativos y la bienvenida y el héroe salían vacíos al subir. Con Lenis en marcha la suavidad la pone Lenis; sin JS o con movimiento reducido no hay clase lenis y la hoja sigue mandando */
/* Barra sin JS (veredicto final del auditor, punto 3, 17 oct): sin JavaScript la barra nunca recibe .compacta y sus enlaces marfil caían sobre el marfil de las secciones claras (1,0–1,6:1). Sin JS lleva siempre el vidrio de .compacta; en las interiores sigue mandando .nav.sobre-claro (más específica). Con JS no cambia nada */
@media (scripting:none){.nav{background:rgba(14,28,21,.74);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid var(--line)}}
/* Nitidez del símbolo a 1× (NUBE-FAVICON parte B, dueño, 18 oct): en la barra, 40 px exactos (antes 39,4 × 1,01569 = 40,016) para que el SVG caiga en píxeles enteros en la barra alta (78 px) y en la compacta (64 px); el del pie ya mide 60 */
.marca .qms-logo__simbolo{width:40px;height:40px}
/* Símbolo óptico de la barra (dueño, 18 oct: «mantenlo dorado pero que quede perfecto, sin despixelar»): en pantallas de densidad 1 los trazos más finos del vector (0,4–0,6 px a 40 px) salían rotos; ahí va el PNG de 01-MARCA/logo-final/vector-2026-10/optico/, con cada trazo de al menos 1,25 px y la cobertura exacta por píxel. En pantallas finas (y con zoom) sigue el vector */
.marca .qms-logo__simbolo--1x{display:none}
@media (resolution:1dppx),(-webkit-device-pixel-ratio:1){.marca svg.qms-logo__simbolo{display:none}.marca .qms-logo__simbolo--1x{display:block}}
/* NUBE-INTRO-OPTICO (dueño, 23 oct 2026, con captura: en la cortina de carga, a densidad 1, «el icono sigue con el detalle de la punta»): el símbolo de la cortina (78 px) pintaba a 1× las puntas finas de los dos anillos, arriba a la derecha junto a la hoja, por debajo de 1 px y se deshacían en puntos; ahí va el mismo PNG óptico que en la barra, a 78 px (trazos de oro ≥ 1,25 px, forma, hoja y color iguales). Con 2× o más sigue el vector */
.intro-logo .qms-logo__simbolo--1x{display:none}
@media (resolution:1dppx),(-webkit-device-pixel-ratio:1){.intro-logo svg.qms-logo__simbolo{display:none}.intro-logo .qms-logo__simbolo--1x{display:block;width:78px;height:78px}}
/* auditoría A08-001 (25 oct 2026): las secciones reciben el foco al llegar por un ancla; sin anillo, porque son destinos de lectura, no controles */
main [id][tabindex="-1"]:focus,footer[tabindex="-1"]:focus,#pieNavegacion[tabindex="-1"]:focus{outline:none}