/* ============================================================
         DESIGN SYSTEM TOKENS — Bastidas v0.2
      ============================================================ */
      :root {
        --brand-700: #2f5d50;
        --brand-600: #3b7263;
        --brand-500: #4e8c7a;
        --brand-100: #dceae4;
        --brand-050: #f1f7f4;
        --warm-600: #b8754c;
  --warm-700: #a05a31;
        --warm-300: #e8c9b0;
        --warm-100: #f6ede4;
        --accent-500: #9f7e1b;
        --ink-900: #1c2623;
        --ink-700: #3a4641;
        --ink-500: #616d69;
        --line-200: #e2e8e4;
        --ground: #ffffff;
        --ground-alt: #f7faf8;
        --success-600: #1f6b42;
        --warning-600: #8a6420;
        --danger-600: #b4453a;
        --info-600: #3b7263;
        --font-display: "Fraunces", Georgia, "Times New Roman", serif;
        --font-body: "Inter", system-ui, -apple-system, sans-serif;
        --fs-display: clamp(2.25rem, 5vw, 3.75rem);
        --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
        --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
        --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
        --fs-body: 1rem;
        --fs-small: 0.875rem;
        --fs-caption: 0.75rem;
        --lh-tight: 1.1;
        --lh-snug: 1.3;
        --lh-normal: 1.6;
        --fw-regular: 400;
        --fw-medium: 500;
        --fw-semibold: 600;
        --fw-bold: 700;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-24: 6rem;
        --section-y: clamp(3rem, 8vw, 6rem);
        --radius-sm: 0.5rem;
        --radius-md: 0.875rem;
        --radius-lg: 1.25rem;
        --radius-xl: 1.75rem;
        --radius-pill: 999px;
        --shadow-sm:
          0 1px 2px rgba(28, 38, 35, 0.06), 0 1px 3px rgba(28, 38, 35, 0.08);
        --shadow-md:
          0 4px 12px rgba(28, 38, 35, 0.08), 0 2px 4px rgba(28, 38, 35, 0.06);
        --shadow-lg:
          0 12px 32px rgba(28, 38, 35, 0.12), 0 4px 8px rgba(28, 38, 35, 0.06);
        --maxw-content: 1200px;
        --maxw-prose: 68ch;
      }

      /* ============================================================
         RESET + BASE
      ============================================================ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        font-family: var(--font-body);
        font-size: var(--fs-body);
        color: var(--ink-900);
        background: var(--ground);
        line-height: var(--lh-normal);
        -webkit-font-smoothing: antialiased;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }

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

      /* ============================================================
         UTILS
      ============================================================ */
      .container {
        width: 100%;
        max-width: var(--maxw-content);
        margin-inline: auto;
        padding-inline: var(--space-6);
      }
      .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;
      }

      /* ============================================================
         BOTONES
      ============================================================ */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-pill);
        font-family: var(--font-body);
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        cursor: pointer;
        border: 2px solid transparent;
        transition:
          background 0.18s ease,
          color 0.18s ease,
          border-color 0.18s ease,
          box-shadow 0.18s ease;
        min-height: 44px;
        white-space: nowrap;
      }
      .btn:focus-visible {
        outline: 2px solid var(--brand-600);
        outline-offset: 3px;
      }
      .btn-primary {
        background: var(--brand-700);
        color: #fff;
        border-color: var(--brand-700);
      }
      .btn-primary:hover {
        background: var(--brand-600);
        border-color: var(--brand-600);
        box-shadow: var(--shadow-md);
      }
      .btn-secondary {
        background: transparent;
        color: var(--brand-700);
        border-color: var(--brand-700);
      }
      .btn-secondary:hover {
        background: var(--brand-050);
      }
      .btn-light {
        background: #fff;
        color: var(--brand-700);
        border-color: #fff;
      }
      .btn-light:hover {
        background: var(--brand-100);
        border-color: var(--brand-100);
      }
      .btn-sm {
        padding: 0.5rem 1.1rem;
        font-size: var(--fs-caption);
        min-height: 36px;
      }

      /* ============================================================
         SECTION HEADINGS
      ============================================================ */
      .section-label {
        display: inline-block;
        font-family: var(--font-body);
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand-600);
        margin-bottom: var(--space-3);
      }
      .section-title {
        font-family: var(--font-display);
        font-size: var(--fs-h2);
        font-weight: var(--fw-bold);
        line-height: var(--lh-snug);
        color: var(--ink-900);
        font-optical-sizing: auto;
      }
      .section-lead {
        font-size: var(--fs-lead);
        color: var(--ink-700);
        line-height: var(--lh-normal);
        max-width: 56ch;
      }
      .section-header {
        margin-bottom: var(--space-12);
      }
      .section-header--center {
        text-align: center;
      }
      .section-header--center .section-lead {
        margin-inline: auto;
      }

      /* ============================================================
         HEADER / NAV
      ============================================================ */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--ground);
        border-bottom: 1px solid var(--line-200);
        box-shadow: var(--shadow-sm);
      }
      .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
        height: 68px;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-shrink: 0;
        text-decoration: none;
      }
      .logo__icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
      }
      .logo__text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
      }
      .logo__name {
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: var(--fw-semibold);
        color: var(--brand-700);
        letter-spacing: -0.01em;
      }
      .logo__tagline {
        font-family: var(--font-body);
        font-size: 0.65rem;
        font-weight: var(--fw-medium);
        color: var(--ink-500);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .site-nav {
        display: flex;
        align-items: center;
        gap: 0;
      }
      .site-nav__list {
        display: flex;
        align-items: center;
        gap: 0;
        list-style: none;
      }
      .site-nav__link {
        display: block;
        padding: 0.5rem 0.85rem;
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
        color: var(--ink-700);
        border-radius: var(--radius-sm);
        transition:
          color 0.15s,
          background 0.15s;
        white-space: nowrap;
      }
      .site-nav__link:hover {
        color: var(--brand-700);
        background: var(--brand-050);
      }
      .site-nav__link:focus-visible {
        outline: 2px solid var(--brand-600);
        outline-offset: 2px;
      }
      .site-nav__link--active {
        color: var(--brand-700);
        font-weight: var(--fw-semibold);
      }
      .site-header__cta {
        flex-shrink: 0;
      }
      .nav-toggle {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-2);
        border-radius: var(--radius-sm);
        color: var(--ink-900);
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
      }
      .nav-toggle:focus-visible {
        outline: 2px solid var(--brand-600);
        outline-offset: 2px;
      }
      .mobile-nav {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgba(28, 38, 35, 0.55);
        backdrop-filter: blur(2px);
      }
      .mobile-nav.is-open {
        display: block;
      }
      .mobile-nav__panel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(320px, 90vw);
        background: var(--ground);
        box-shadow: var(--shadow-lg);
        display: flex;
        flex-direction: column;
        padding: var(--space-6);
        gap: var(--space-4);
        overflow-y: auto;
      }
      .mobile-nav__close {
        align-self: flex-end;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-2);
        color: var(--ink-700);
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .mobile-nav__close:focus-visible {
        outline: 2px solid var(--brand-600);
        outline-offset: 2px;
      }
      .mobile-nav__list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
      }
      .mobile-nav__list a {
        display: block;
        padding: 0.875rem var(--space-4);
        font-size: 1rem;
        font-weight: var(--fw-medium);
        color: var(--ink-700);
        border-radius: var(--radius-md);
        transition:
          background 0.15s,
          color 0.15s;
      }
      .mobile-nav__list a:hover {
        background: var(--brand-050);
        color: var(--brand-700);
      }
      .mobile-nav__cta {
        margin-top: var(--space-4);
      }
      .mobile-nav__cta .btn {
        width: 100%;
        justify-content: center;
      }

      /* ============================================================
         HERO — Hidroterapia (imagen con overlay)
      ============================================================ */
      .hero-hydro {
        position: relative;
        min-height: 560px;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .hero-hydro__bg {
        position: absolute;
        inset: 0;
      }
      .hero-hydro__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      .hero-hydro__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          100deg,
          rgba(28, 38, 35, 0.82) 0%,
          rgba(47, 93, 80, 0.65) 55%,
          rgba(47, 93, 80, 0.3) 100%
        );
      }
      .hero-hydro__inner {
        position: relative;
        z-index: 2;
        padding-block: var(--space-24) var(--space-16);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
        align-items: center;
      }
      .hero-hydro__content {
      }
      .hero-hydro__badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: var(--radius-pill);
        padding: 0.35rem 0.875rem;
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: var(--space-6);
        backdrop-filter: blur(4px);
      }
      .hero-hydro__badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--brand-100);
        flex-shrink: 0;
      }
      .hero-hydro__title {
        font-family: var(--font-display);
        font-size: var(--fs-display);
        font-weight: var(--fw-bold);
        line-height: var(--lh-tight);
        color: #fff;
        font-optical-sizing: auto;
        margin-bottom: var(--space-6);
      }
      .hero-hydro__lead {
        font-size: var(--fs-lead);
        color: rgba(255, 255, 255, 0.85);
        line-height: var(--lh-normal);
        margin-bottom: var(--space-8);
        max-width: 52ch;
      }
      .hero-hydro__ctas {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-bottom: var(--space-8);
      }
      .hero-hydro__trust {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
        backdrop-filter: blur(4px);
      }
      .hero-hydro__trust-stars {
        display: flex;
        gap: 2px;
        color: var(--accent-500);
      }
      .hero-hydro__trust-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
      }
      .hero-hydro__trust-name {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        color: #fff;
      }
      .hero-hydro__trust-sub {
        font-size: var(--fs-caption);
        color: rgba(255, 255, 255, 0.7);
      }

      /* ============================================================
         QUÉ ES — 2 columnas imagen + texto
      ============================================================ */
      .que-es {
        background: var(--ground);
        padding-block: var(--section-y);
      }
      .que-es__layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
        align-items: center;
      }
      .que-es__img-wrap {
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        aspect-ratio: 4/3;
      }
      .que-es__img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .que-es__text {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
      }
      .que-es__body {
        font-size: var(--fs-lead);
        color: var(--ink-700);
        line-height: var(--lh-normal);
      }

      /* ============================================================
         SÍNTOMAS — Gancho de conversión
      ============================================================ */
      .sintomas {
        background: var(--brand-700);
        padding-block: var(--section-y);
        position: relative;
        overflow: hidden;
      }
      .sintomas::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        background: radial-gradient(
          circle at 80% 20%,
          rgba(255, 255, 255, 0.06) 0%,
          transparent 60%
        );
        pointer-events: none;
      }
      .sintomas__inner {
        position: relative;
        z-index: 1;
      }
      .sintomas__header {
        text-align: center;
        margin-bottom: var(--space-12);
      }
      .sintomas__label {
        display: inline-block;
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand-100);
        margin-bottom: var(--space-3);
      }
      .sintomas__title {
        font-family: var(--font-display);
        font-size: var(--fs-h2);
        font-weight: var(--fw-bold);
        color: #fff;
        font-optical-sizing: auto;
        line-height: var(--lh-snug);
        margin-bottom: var(--space-4);
      }
      .sintomas__subtitle {
        font-size: var(--fs-lead);
        color: rgba(255, 255, 255, 0.75);
        max-width: 52ch;
        margin-inline: auto;
      }
      .sintomas__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
        margin-bottom: var(--space-12);
      }
      .sintoma-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-lg);
        backdrop-filter: blur(4px);
        transition: background 0.2s;
      }
      .sintoma-item:hover {
        background: rgba(255, 255, 255, 0.13);
      }
      .sintoma-item__icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .sintoma-item__text {
        font-size: var(--fs-small);
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.4;
      }
      .sintomas__cta-block {
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: var(--space-12);
      }
      .sintomas__cta-text {
        font-family: var(--font-display);
        font-size: clamp(1.3rem, 2.5vw, 1.75rem);
        font-weight: var(--fw-semibold);
        color: #fff;
        font-optical-sizing: auto;
        margin-bottom: var(--space-6);
        line-height: var(--lh-snug);
      }
      .sintomas__cta-text em {
        color: var(--warm-300);
        font-style: italic;
      }
      .sintomas__cta-actions {
        display: flex;
        justify-content: center;
        gap: var(--space-3);
        flex-wrap: wrap;
      }

      /* ============================================================
         QUIÉN LO REALIZA
      ============================================================ */
      .quien {
        background: var(--ground-alt);
        padding-block: var(--section-y);
      }
      .quien__layout {
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: var(--space-16);
        align-items: center;
      }
      .quien__layout--solo {
        grid-template-columns: 1fr;
        max-width: 70ch;
      }
      .quien__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
      }
      .quien__text {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
      }
      .quien__body {
        font-size: var(--fs-lead);
        color: var(--ink-700);
        line-height: var(--lh-normal);
      }
      .quien__credentials {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-top: var(--space-4);
      }
      .quien__credential {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--ground);
        border: 1px solid var(--line-200);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
      }
      .quien__credential-icon {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-sm);
        background: var(--brand-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-700);
        flex-shrink: 0;
      }
      .quien__credential-text {
        font-size: var(--fs-small);
        color: var(--ink-700);
        line-height: 1.45;
      }
      .quien__badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        background: var(--brand-050);
        border: 1px solid var(--brand-100);
        border-radius: var(--radius-pill);
        padding: 0.35rem 0.875rem;
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        color: var(--brand-700);
      }

      /* ============================================================
         CÓMO SE REALIZA
      ============================================================ */
      .como {
        background: var(--ground);
        padding-block: var(--section-y);
      }
      .como__layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
        align-items: center;
      }
      .como__img-wrap {
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        aspect-ratio: 4/3;
      }
      .como__img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .como__text {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
      }
      .como__body {
        font-size: var(--fs-body);
        color: var(--ink-700);
        line-height: var(--lh-normal);
      }
      .como__meta {
        display: flex;
        gap: var(--space-4);
        flex-wrap: wrap;
      }
      .como__meta-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        color: var(--brand-700);
        background: var(--brand-050);
        border: 1px solid var(--brand-100);
        border-radius: var(--radius-pill);
        padding: 0.3rem 0.875rem;
      }

      /* ============================================================
         VALIDACIÓN MÉDICA — Embudo Dr. Arjonilla
      ============================================================ */
      .validacion {
        background: var(--warm-100);
        padding-block: var(--section-y);
      }
      .validacion__layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
        align-items: center;
      }
      .validacion__img-wrap {
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        aspect-ratio: 3/4;
      }
      .validacion__img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
      }
      .validacion__text {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
      }
      .validacion__body {
        font-size: var(--fs-body);
        color: var(--ink-700);
        line-height: var(--lh-normal);
      }
      .validacion__dr-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        background: var(--ground);
        border: 1px solid var(--line-200);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
        box-shadow: var(--shadow-sm);
      }
      .validacion__dr-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background: var(--brand-700);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
      }
      .validacion__dr-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .validacion__dr-name {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        color: var(--ink-900);
      }
      .validacion__dr-role {
        font-size: var(--fs-caption);
        color: var(--ink-500);
      }

      /* Proceso 3 pasos */
      .proceso {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
      }
      .proceso__step {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-6);
        background: var(--ground);
        border: 1px solid var(--line-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
      }
      .proceso__step-num {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--brand-700);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: var(--fw-bold);
        flex-shrink: 0;
        font-optical-sizing: auto;
      }
      .proceso__step-content {
      }
      .proceso__step-title {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        color: var(--ink-900);
        margin-bottom: 2px;
      }
      .proceso__step-desc {
        font-size: var(--fs-caption);
        color: var(--ink-500);
        line-height: 1.45;
      }

      /* ============================================================
         BENEFICIOS — Grid 9 cards
      ============================================================ */
      .beneficios {
        background: var(--ground-alt);
        padding-block: var(--section-y);
      }
      .beneficios__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
      }
      .beneficio-card {
        background: var(--ground);
        border: 1px solid var(--line-200);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        transition:
          box-shadow 0.2s,
          border-color 0.2s,
          transform 0.2s;
      }
      .beneficio-card:hover {
        box-shadow: var(--shadow-md);
        border-color: var(--brand-100);
        transform: translateY(-2px);
      }
      .beneficio-card__icon {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        background: var(--brand-050);
        border: 1px solid var(--brand-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-700);
        flex-shrink: 0;
      }
      .beneficio-card__title {
        font-family: var(--font-display);
        font-size: var(--fs-h3);
        font-weight: var(--fw-semibold);
        color: var(--ink-900);
        font-optical-sizing: auto;
        line-height: var(--lh-snug);
      }
      .beneficio-card__desc {
        font-size: var(--fs-small);
        color: var(--ink-700);
        line-height: var(--lh-normal);
      }

      /* ============================================================
         POR QUÉ NOSOTROS
      ============================================================ */
      .por-que {
        background: var(--ground);
        padding-block: var(--section-y);
      }
      .por-que__layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
        align-items: start;
      }
      .por-que__intro {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
      }
      .por-que__img-wrap {
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        aspect-ratio: 4/3;
      }
      .por-que__img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .por-que__razones {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
      }
      .razon-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-4);
        border-radius: var(--radius-md);
        border: 1px solid var(--line-200);
        background: var(--ground-alt);
      }
      .razon-item__icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background: var(--brand-050);
        border: 1px solid var(--brand-100);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--brand-700);
        flex-shrink: 0;
      }
      .razon-item__title {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        color: var(--ink-900);
        margin-bottom: 2px;
      }
      .razon-item__desc {
        font-size: var(--fs-caption);
        color: var(--ink-500);
        line-height: 1.45;
      }

      /* ============================================================
         FAQ — Acordeón nativo
      ============================================================ */
      .faq {
        background: var(--ground-alt);
        padding-block: var(--section-y);
      }
      .faq__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        max-width: 780px;
        margin-inline: auto;
      }
      details.faq-item {
        background: var(--ground);
        border: 1px solid var(--line-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
      }
      details.faq-item[open] {
        border-color: var(--brand-100);
      }
      details.faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-6);
        cursor: pointer;
        list-style: none;
        font-size: var(--fs-body);
        font-weight: var(--fw-semibold);
        color: var(--ink-900);
        transition: background 0.15s;
        user-select: none;
        min-height: 44px;
      }
      details.faq-item summary::-webkit-details-marker {
        display: none;
      }
      details.faq-item summary:hover {
        background: var(--brand-050);
      }
      details.faq-item summary:focus-visible {
        outline: 2px solid var(--brand-600);
        outline-offset: -2px;
      }
      .faq-item__icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--brand-500);
        transition: transform 0.2s;
      }
      details.faq-item[open] .faq-item__icon {
        transform: rotate(45deg);
      }
      .faq-item__body {
        padding: 0 var(--space-6) var(--space-6);
        font-size: var(--fs-body);
        color: var(--ink-700);
        line-height: var(--lh-normal);
      }

      /* ============================================================
         CTA BAND (CIERRE)
      ============================================================ */
      .cta-band {
        background: var(--brand-700);
        padding-block: var(--space-16);
        position: relative;
        overflow: hidden;
      }
      .cta-band::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        background: radial-gradient(
          circle at 70% 50%,
          rgba(255, 255, 255, 0.05) 0%,
          transparent 60%
        );
        pointer-events: none;
      }
      .cta-band__inner {
        text-align: center;
        position: relative;
      }
      .cta-band__label {
        display: inline-block;
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--brand-100);
        margin-bottom: var(--space-4);
      }
      .cta-band__title {
        font-family: var(--font-display);
        font-size: var(--fs-h2);
        font-weight: var(--fw-bold);
        color: #fff;
        line-height: var(--lh-snug);
        margin-bottom: var(--space-6);
        font-optical-sizing: auto;
      }
      .cta-band__lead {
        font-size: var(--fs-lead);
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: var(--space-8);
        max-width: 52ch;
        margin-inline: auto;
      }
      .cta-band__buttons {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        justify-content: center;
        align-items: center;
      }
      .cta-band__contact {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-6);
        justify-content: center;
        margin-top: var(--space-6);
      }
      .cta-band__contact-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: rgba(255, 255, 255, 0.7);
        font-size: var(--fs-small);
      }
      .cta-band__contact-item a {
        color: #fff;
        font-weight: var(--fw-medium);
      }
      .cta-band__contact-item a:hover {
        text-decoration: underline;
      }

      /* ============================================================
         FOOTER
      ============================================================ */
      .site-footer {
        background: var(--ink-900);
        color: rgba(255, 255, 255, 0.65);
        padding-block: var(--space-12) var(--space-8);
      }
      .site-footer__grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: var(--space-8);
        margin-bottom: var(--space-8);
      }
      .footer-col__logo {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
      }
      .footer-col__logo-icon {
        width: 34px;
        height: 34px;
      }
      .footer-col__logo-name {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: var(--fw-semibold);
        color: #fff;
        font-optical-sizing: auto;
      }
      .footer-col__desc {
        font-size: var(--fs-small);
        line-height: var(--lh-normal);
        margin-bottom: var(--space-4);
      }
      .footer-col__colegiado {
        font-size: var(--fs-caption);
        color: var(--warm-300);
        font-weight: var(--fw-medium);
      }
      .footer-col__title {
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        color: #fff;
        margin-bottom: var(--space-4);
        letter-spacing: 0.04em;
      }
      .footer-col__list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }
      .footer-col__list a {
        font-size: var(--fs-small);
        color: rgba(255, 255, 255, 0.6);
        transition: color 0.15s;
      }
      .footer-col__list a:hover {
        color: #fff;
      }
      .footer-contact-item {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        font-size: var(--fs-small);
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: var(--space-3);
      }
      .footer-contact-item svg {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--brand-500);
      }
      .footer-contact-item a {
        color: rgba(255, 255, 255, 0.7);
        transition: color 0.15s;
      }
      .footer-contact-item a:hover {
        color: #fff;
      }
      .site-footer__bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: var(--space-6);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-3);
      }
      .site-footer__copyright {
        font-size: var(--fs-caption);
      }
      .site-footer__legal {
        display: flex;
        gap: var(--space-4);
      }
      .site-footer__legal a {
        font-size: var(--fs-caption);
        color: rgba(255, 255, 255, 0.5);
        transition: color 0.15s;
      }
      .site-footer__legal a:hover {
        color: rgba(255, 255, 255, 0.85);
      }

      /* ============================================================
         WHATSAPP FLOAT
      ============================================================ */
      .whatsapp-float {
        position: fixed;
        bottom: var(--space-6);
        right: var(--space-6);
        z-index: 300;
        width: 56px;
        height: 56px;
        background: #25d366;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 4px 16px rgba(37, 211, 102, 0.4),
          var(--shadow-md);
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
        color: #fff;
        text-decoration: none;
      }
      .whatsapp-float:hover {
        transform: scale(1.08) translateY(-2px);
        box-shadow:
          0 8px 24px rgba(37, 211, 102, 0.5),
          var(--shadow-lg);
      }
      .whatsapp-float:focus-visible {
        outline: 2px solid #128c7e;
        outline-offset: 3px;
      }

      /* ============================================================
         RESPONSIVE — TABLET (max 900px)
      ============================================================ */
      @media (max-width: 900px) {
        .hero-hydro__inner {
          grid-template-columns: 1fr;
          gap: var(--space-8);
        }
        .que-es__layout,
        .como__layout,
        .validacion__layout,
        .por-que__layout {
          grid-template-columns: 1fr;
          gap: var(--space-8);
        }
        .quien__layout {
          grid-template-columns: 1fr;
          gap: var(--space-8);
        }
        .beneficios__grid {
          grid-template-columns: 1fr 1fr;
        }
        .sintomas__grid {
          grid-template-columns: 1fr 1fr;
        }
        .site-footer__grid {
          grid-template-columns: 1fr 1fr;
          gap: var(--space-6);
        }
        .site-nav {
          display: none;
        }
        .nav-toggle {
          display: flex;
        }
      }

      /* ============================================================
         RESPONSIVE — MOBILE (max 600px)
      ============================================================ */
      @media (max-width: 600px) {
        .container {
          padding-inline: var(--space-4);
        }
        /* SEM-201: el CTA "Reservar Cita" no cabe junto al logo + hamburguesa
           a anchos pequeños. Se oculta del header (la acción sigue accesible
           dentro del menú móvil, .mobile-nav__cta). */
        .site-header__cta {
          display: none;
        }
        .hero-hydro__ctas {
          flex-direction: column;
        }
        .hero-hydro__ctas .btn {
          width: 100%;
          justify-content: center;
        }
        .beneficios__grid {
          grid-template-columns: 1fr;
        }
        .sintomas__grid {
          grid-template-columns: 1fr;
        }
        .sintomas__cta-actions {
          flex-direction: column;
        }
        .sintomas__cta-actions .btn {
          width: 100%;
          justify-content: center;
        }
        .site-footer__grid {
          grid-template-columns: 1fr;
        }
        .site-footer__bottom {
          flex-direction: column;
          align-items: flex-start;
        }
        .cta-band__buttons {
          flex-direction: column;
        }
        .cta-band__buttons .btn {
          width: 100%;
          justify-content: center;
        }
      }