:root {
    /* ---- Liquid glass system (refinado) ---- */
    --glass-bg: rgba(255, 255, 255, 0.22);
    --glass-bg-strong: rgba(255, 255, 255, 0.40);
    --glass-border: rgba(255, 255, 255, 0.60);
    --glass-highlight: rgba(255, 255, 255, 0.85);
    --glass-blur: blur(24px) saturate(180%);
    --glass-blur-lite: blur(14px) saturate(160%);
    --glass-shadow: 0 18px 50px rgba(70, 82, 55, 0.14);
    --glass-shadow-hover: 0 26px 64px rgba(70, 82, 55, 0.20);
    --glass-inset: inset 0 1px 1px rgba(255, 255, 255, 0.9),
                   inset 0 -1px 1px rgba(255, 255, 255, 0.25);

    /* ---- Frost glass (spec Figma: bg-white/20 + borde blanco + pastilla) ----
       Es el lenguaje dominante de la web: superficies opacas-transparentes,
       muy esmeriladas, con borde blanco de 1px. */
    --frost-bg: rgba(255, 255, 255, 0.20);
    --frost-bg-2: rgba(255, 255, 255, 0.30);
    --frost-border: rgba(255, 255, 255, 0.92);
    --frost-blur: blur(28px) saturate(165%);
    --frost-blur-lite: blur(16px) saturate(150%);
    --radius-pill: 72px;

    /* ---- Rejilla de página: navbar y TODAS las secciones comparten
       este ancho y estos márgenes, así todo cae en la misma columna ---- */
    --page-w: 1280px;
    --page-gutter: clamp(20px, 4vw, 48px);
    /* distancia del borde del contenido al borde de la pantalla (para sangrar) */
    --page-bleed: calc(-1 * max(var(--page-gutter), (100vw - var(--page-w)) / 2));

    --sage: #7c8c68;
    --sage-dark: #5f6e4d;
    /* Verde olivar: el color de los botones y acentos verdes */
    --olive: #6f7c4b;
    --olive-deep: #55603a;
    --olive-soft: #97a47a;
    --cream: #f3efe6;
    --ink: #2b2b26;
    --muted: #5a6350;

    /* Sistema tipográfico */
    --font-display: "Fraunces", "Playfair Display", Georgia, serif; /* titulares grandes */
    --font-serif: "Playfair Display", Georgia, serif;             /* marca / autoridad / cierres (italic) */
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;  /* textos */

    /* z-index scale */
    --z-bg: 0;
    --z-veil: 1;
    --z-hero: 3;
    --z-content: 4;
    --z-nav: 100;
  }

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

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
  }

  /* Sin scroll lateral en ningun dispositivo */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-family: var(--font-body);
    background: var(--cream);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Degradado blanco/crema sutil de arriba a abajo sobre el video,
     para que los textos y el glass se lean mejor (poco ruido) */
  .bg-veil {
    position: fixed;
    inset: 0;
    z-index: var(--z-veil);
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(248, 245, 238, 0.78) 45%,
      rgba(243, 239, 230, 0.92) 100%
    );
  }

  /* Fixed video background, always behind everything */
  .video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
  }

  /* Hero pinned to the viewport; it fades and drifts upward as the page
     scrolls, disappearing rather than sliding off as a hard cut */
  .hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
    will-change: opacity, transform;
  }

  .hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% 28%;
    display: block;
  }

  /* Scroll-space holder equal to one viewport so the hero has room to fade */
  .hero-spacer {
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
  }

  /* ---- Hero overlay (title + form on top of the hero photo) ---- */
  .hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 0 var(--page-gutter);
    padding-top: 88px;
    justify-content: center;
  }

  .hero-copy {
    width: 100%;
    max-width: var(--page-w);
  }

  /* El contenido real sigue siendo estrecho, pero arranca en la misma
     columna que el navbar y el resto de secciones */
  .hero-copy > * { max-width: 660px; }

  /* ---- Title ---- */
  .title-block {
    color: var(--ink);
    margin-bottom: 26px;
  }

  .headline {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--ink);
  }

  .headline em {
    font-style: italic;
    color: var(--sage);
  }

  .subline {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    color: #5a6350;
    max-width: 440px;
    line-height: 1.5;
  }

  /* ---- Glass form ---- */
  .form-card {
    position: relative;
    border-radius: 24px;
    padding: 22px 22px 20px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    max-width: 420px;
    overflow: hidden;
  }

  /* Brillo especular superior (efecto liquid) */
  .form-card::after,
  .glass-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    pointer-events: none;
  }

  .form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.1) 45%,
      rgba(255, 255, 255, 0.4) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .form-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }

  .form-eyebrow {
    font-size: 0.7rem;
    color: #5a6350;
    letter-spacing: 0.02em;
  }

  .form-step {
    font-size: 0.7rem;
    color: #5a6350;
  }

  .form-title {
    font-family: "Playfair Display", serif;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 4px 0 10px;
  }

  .progress {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
  }

  .progress span {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(90, 99, 80, 0.2);
  }

  .progress span.active {
    background: var(--sage);
  }

  .form-desc {
    font-size: 0.8rem;
    color: #5a6350;
    margin-bottom: 14px;
  }

  .field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    margin-bottom: 9px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .field svg {
    flex-shrink: 0;
    opacity: 0.65;
    color: var(--ink);
    width: 16px;
    height: 16px;
  }

  .field input,
  .field select {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--ink);
    font-size: 0.84rem;
    font-family: inherit;
  }

  .field input::placeholder {
    color: #7a8070;
  }

  .field select {
    appearance: none;
    cursor: pointer;
  }

  .field select option {
    color: var(--ink);
  }

  .chevron {
    opacity: 0.6;
  }

  .btn-continue {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin-top: 2px;
    border: none;
    border-radius: 12px;
    background: var(--sage-dark);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .btn-continue:hover {
    background: var(--sage);
    transform: translateY(-1px);
  }

  .form-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.68rem;
    color: #6b7260;
  }

  @media (max-width: 860px) {
    .hero-content {
      align-items: flex-end;
      padding: 0 5vw 8vh;
    }
    .hero-copy {
      max-width: 100%;
    }
    .headline {
      font-size: 2rem;
    }
  }

  /* Section that scrolls on top of the fixed video background */
  .section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 3;
  }

  /* ============ Content sections (scroll reveal + parallax grids) ============ */
  .content-section {
    position: relative;
    width: 100%;
    min-height: auto;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: clamp(72px, 11vh, 128px) var(--page-gutter);
  }

  /* Reveal al entrar y al salir (solo si hay JS). Sin JS -> siempre visible.
     Tiempos largos y con un pequeno retardo: la seccion "respira" al
     aparecer y se va con calma al salir de pantalla. */
  .js .content-section {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  .js .content-section.is-visible {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
  }

  /* Aparicion escalonada: JS marca cada elemento con .reveal-item y un
     retardo propio (--rd), asi cada seccion "entra" pieza a pieza. */
  .js .content-section .reveal-item {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .js .content-section.is-visible .reveal-item {
    opacity: 1;
    transform: none;
    /* 260ms de espera + el escalonado propio de cada pieza */
    transition-delay: calc(260ms + var(--rd, 0ms));
  }

  @media (prefers-reduced-motion: reduce) {
    .js .content-section .reveal-item {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .cs-inner {
    width: 100%;
    max-width: var(--page-w);
    margin: 0 auto;
  }

  .cs-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
  }

  .cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 14px;
  }

  .cs-eyebrow::before,
  .cs-eyebrow::after {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--sage);
  }

  .cs-title {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--ink);
    margin-bottom: 12px;
  }

  .cs-title em {
    font-style: italic;
    color: var(--sage-dark);
  }

  .cs-subtitle {
    font-size: 1rem;
    color: #5a6350;
    line-height: 1.55;
  }

  /* ---- Glass card grid (section 02) ---- */
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .glass-card {
    position: relative;
    border-radius: 26px;
    padding: 32px 26px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      0 16px 40px rgba(60, 60, 40, 0.10),
      inset 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  .glass-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 22px 50px rgba(60, 60, 40, 0.14),
      inset 0 1px 1px rgba(255, 255, 255, 0.85);
  }

  .glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.08) 45%,
      rgba(255, 255, 255, 0.3) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 140, 104, 0.16);
    color: var(--sage-dark);
    margin-bottom: 20px;
  }

  .card-title {
    font-family: "Playfair Display", serif;
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 10px;
  }

  .card-text {
    font-size: 0.9rem;
    color: #5a6350;
    line-height: 1.55;
  }

  /* ---- Image placeholder grid (section 03) ---- */
  .media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .media-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 14px 34px rgba(60, 60, 40, 0.09);
    transition: transform 0.35s ease;
  }

  .media-card:hover {
    transform: translateY(-4px);
  }

  .media-placeholder {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(124, 140, 104, 0.08) 0px,
        rgba(124, 140, 104, 0.08) 10px,
        transparent 10px,
        transparent 20px
      ),
      rgba(124, 140, 104, 0.06);
    border-bottom: 1px dashed rgba(124, 140, 104, 0.35);
    color: rgba(95, 110, 77, 0.55);
  }

  .media-caption {
    padding: 16px 18px 18px;
    font-size: 0.86rem;
    color: var(--ink);
    line-height: 1.4;
    font-weight: 500;
  }

  @media (max-width: 980px) {
    .cards-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .media-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 620px) {
    .cards-grid,
    .media-grid {
      grid-template-columns: 1fr;
    }
    .content-section {
      padding: 70px var(--page-gutter);
    }
  }

  /* ---- 04. Step timeline ---- */
  .steps-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }

  .step-card {
    position: relative;
    border-radius: 24px;
    padding: 28px 22px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 16px 40px rgba(60, 60, 40, 0.10), inset 0 1px 1px rgba(255,255,255,0.8);
  }

  .step-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sage-dark);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }

  .step-title {
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .step-text {
    font-size: 0.86rem;
    color: #5a6350;
    line-height: 1.5;
  }

  /* ---- 05. Testimonials ---- */
  .testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .testi-card {
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 16px 40px rgba(60, 60, 40, 0.10), inset 0 1px 1px rgba(255,255,255,0.8);
  }

  .testi-quote-icon {
    color: var(--sage);
    opacity: 0.6;
    margin-bottom: 14px;
  }

  .testi-text {
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .testi-person {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(124, 140, 104, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sage-dark);
    flex-shrink: 0;
  }

  .testi-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
  }

  .testi-role {
    font-size: 0.76rem;
    color: #5a6350;
  }

  /* ---- 07. Differentiators ---- */
  .diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  /* reuses .glass-card / .card-icon / .card-title / .card-text */

  /* ---- 08. FAQ accordion ---- */
  .faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .faq-item {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    overflow: hidden;
  }

  .faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
  }

  .faq-question svg {
    flex-shrink: 0;
    color: var(--sage-dark);
    transition: transform 0.3s ease;
  }

  .faq-item.open .faq-question svg {
    transform: rotate(180deg);
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .faq-item.open .faq-answer {
    max-height: 200px;
  }

  .faq-answer p {
    padding: 0 22px 20px;
    font-size: 0.88rem;
    color: #5a6350;
    line-height: 1.55;
  }

  /* ---- 09. Community ---- */
  .community-card {
    position: relative;
    border-radius: 30px;
    padding: 56px 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 20px 50px rgba(60, 60, 40, 0.10), inset 0 1px 1px rgba(255,255,255,0.8);
    max-width: 780px;
    margin: 0 auto;
  }

  .community-photo {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    aspect-ratio: 16 / 9;
    box-shadow: var(--glass-shadow);
  }

  .community-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
  }

  .community-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(124, 140, 104, 0.16);
    color: var(--sage-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
  }

  .community-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 26px 0 30px;
  }

  .perk-pill {
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: var(--ink);
  }

  .btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    border: none;
    background: var(--sage-dark);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }

  .btn-solid:hover {
    background: var(--sage);
    transform: translateY(-1px);
  }

  /* ---- 10. Emotional CTA ---- */
  .cta-banner {
    position: relative;
    border-radius: 32px;
    padding: 70px 40px;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    background: rgba(124, 140, 104, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 24px 60px rgba(60, 60, 40, 0.14), inset 0 1px 1px rgba(255,255,255,0.6);
  }

  .cta-banner .cs-title,
  .cta-banner .cs-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-banner .cs-title {
    margin-bottom: 14px;
  }

  .cta-banner .cs-subtitle {
    margin-bottom: 30px;
  }

  /* ---- 11. Blog / resources ---- */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .blog-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 16px 40px rgba(60, 60, 40, 0.10);
    transition: transform 0.35s ease;
  }

  .blog-card:hover {
    transform: translateY(-4px);
  }

  .blog-thumb {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(124, 140, 104, 0.06);
    border-bottom: 1px solid rgba(124, 140, 104, 0.18);
    color: rgba(95, 110, 77, 0.55);
  }

  .blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .blog-card:hover .blog-thumb img { transform: scale(1.04); }

  .blog-body {
    padding: 20px 22px 22px;
  }

  .blog-tag {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: 10px;
    display: block;
  }

  .blog-title {
    font-family: "Playfair Display", serif;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .blog-excerpt {
    font-size: 0.85rem;
    color: #5a6350;
    line-height: 1.5;
  }

  /* ---- 12. Contact ---- */
  .contact-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
  }

  a.contact-row:hover {
    transform: translateX(3px);
  }

  .contact-row .card-icon {
    margin-bottom: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .contact-row-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
  }

  .contact-row-text {
    font-size: 0.82rem;
    color: #5a6350;
  }

  .contact-form-card {
    border-radius: 26px;
    padding: 32px 28px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 20px 50px rgba(60, 60, 40, 0.12), inset 0 1px 1px rgba(255,255,255,0.8);
  }

  .contact-form-card .field {
    margin-bottom: 12px;
  }

  .contact-form-card textarea {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    color: var(--ink);
    font-size: 0.88rem;
    font-family: inherit;
    resize: none;
  }

  .contact-form-card .field.textarea {
    align-items: flex-start;
    padding-top: 12px;
  }

  @media (max-width: 980px) {
    .steps-row,
    .testi-grid,
    .diff-grid,
    .blog-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .contact-wrap {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 620px) {
    .steps-row,
    .testi-grid,
    .diff-grid,
    .blog-grid {
      grid-template-columns: 1fr;
    }
    .community-card,
    .cta-banner {
      padding: 44px 24px;
    }
  }

  /* Navbar: centrada, relleno equilibrado (logo | enlaces | CTA), glassmorphism */
  .navbar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--page-gutter) * 2);
    max-width: var(--page-w);
    height: 64px;
    z-index: var(--z-nav);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 0 8px 0 20px;

    /* Spec: bg-white/20 · borde blanco 1px · pastilla */
    border-radius: var(--radius-pill);
    background: var(--frost-bg);
    border: 1px solid var(--frost-border);

    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);

    box-shadow:
      0 12px 36px rgba(70, 82, 55, 0.18),
      var(--glass-inset);
  }

  .navbar-logo-link {
    justify-self: start;
    display: flex;
    align-items: center;
  }

  .navbar-logo {
    height: 38px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }

  .navbar-links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .navbar-links a {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    opacity: 0.82;
    white-space: nowrap;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  .navbar-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    background: var(--sage);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }

  .navbar-links a:hover {
    opacity: 1;
    color: var(--sage-dark);
  }

  .navbar-links a:hover::after {
    transform: scaleX(1);
  }

  .navbar-right {
    /* Columna fija: en movil .navbar-links es absolute y sale del flujo del
       grid, asi que sin esto el boton de menu se quedaba centrado. */
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .navbar-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    background: var(--sage-dark);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .navbar-cta:hover {
    background: var(--sage);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(95, 110, 77, 0.32);
  }

  .navbar-cta .cta-short {
    display: none;
  }

  /* Boton hamburguesa (solo movil) */
  .navbar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.35);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .navbar-toggle:hover {
    background: rgba(255, 255, 255, 0.55);
  }

  @media (max-width: 860px) {
    .navbar-links {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 12px;
      border-radius: 18px;
      background: var(--glass-bg-strong);
      border: 1px solid var(--glass-border);
      -webkit-backdrop-filter: var(--glass-blur);
      backdrop-filter: var(--glass-blur);
      box-shadow: var(--glass-shadow);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    .navbar-links.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .navbar-links a {
      opacity: 1;
      padding: 12px 14px;
      border-radius: 12px;
    }

    .navbar-links a::after {
      display: none;
    }

    .navbar-links a:active {
      background: rgba(124, 140, 104, 0.12);
    }

    .navbar-toggle {
      display: flex;
    }
  }

  @media (max-width: 420px) {
    .navbar-cta .cta-full {
      display: none;
    }
    .navbar-cta .cta-short {
      display: inline;
    }
  }

  .navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.05) 40%,
      rgba(255, 255, 255, 0.3) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .navbar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.9),
      transparent
    );
    border-radius: 999px;
  }

  /* =====================================================================
     PULIDO GLASS UNIFICADO — todas las superficies comparten el mismo
     lenguaje de cristal liquido (blur, borde, brillo, sombra)
     ===================================================================== */
  .glass-card,
  .step-card,
  .testi-card,
  .community-card,
  .contact-form-card,
  .faq-item {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-inset);
  }

  .glass-card {
    position: relative;
    overflow: hidden;
  }

  .blog-card,
  .media-card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
    box-shadow: var(--glass-shadow);
  }

  .cta-banner {
    background: linear-gradient(
      135deg,
      rgba(124, 140, 104, 0.30),
      rgba(124, 140, 104, 0.16)
    );
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-inset);
  }

  /* Elevacion consistente al hover */
  .glass-card:hover,
  .media-card:hover,
  .blog-card:hover,
  .step-card:hover {
    box-shadow: var(--glass-shadow-hover), var(--glass-inset);
  }

  /* =====================================================================
     ACCESIBILIDAD
     ===================================================================== */
  a,
  button,
  input,
  select,
  textarea {
    cursor: pointer;
  }

  input,
  textarea {
    cursor: text;
  }

  :focus-visible {
    outline: 2px solid var(--sage-dark);
    outline-offset: 3px;
    border-radius: 6px;
  }

  /* Respeta a quien prefiere menos movimiento */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
    .hero,
    .content-section {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* =====================================================================
     FOOTER (claro, marfil, on-brand)
     ===================================================================== */
  .site-footer {
    position: relative;
    z-index: var(--z-content);
    /* Paisaje de olivos de fondo, con velo claro para que se lea el texto */
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(250, 247, 241, 0.48) 45%,
        rgba(243, 239, 230, 0.70) 100%
      ),
      url("../assets/footer-bg.webp") center / cover no-repeat;
    color: var(--ink);
    border-top: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
    padding: 64px var(--page-gutter) 30px;
  }

  .footer-inner {
    max-width: var(--page-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 40px;
  }

  .footer-brand {
    max-width: 320px;
  }

  .footer-logo {
    height: 38px;
    width: auto;
    display: block;
    margin-bottom: 16px;
  }

  .footer-tagline {
    font-family: "Playfair Display", serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--sage-dark);
    margin-bottom: 8px;
  }

  .footer-note {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.55;
  }

  .footer-col h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sage-dark);
    margin-bottom: 14px;
    font-weight: 600;
  }

  .footer-col a,
  .footer-col span {
    display: block;
    font-size: 0.9rem;
    color: var(--ink);
    opacity: 0.78;
    text-decoration: none;
    margin-bottom: 10px;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  .footer-col a:hover {
    opacity: 1;
    color: var(--sage-dark);
  }

  .footer-bottom {
    max-width: var(--page-w);
    margin: 42px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(43, 43, 38, 0.12);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .footer-disclaimer {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.55;
    max-width: 760px;
  }

  .footer-copy {
    font-size: 0.78rem;
    color: var(--muted);
    opacity: 0.85;
  }

  @media (max-width: 860px) {
    .footer-inner {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .footer-brand {
      grid-column: 1 / -1;
      max-width: none;
    }
  }

  @media (max-width: 480px) {
    .footer-inner {
      grid-template-columns: 1fr;
    }
  }

  /* =====================================================================
     BLOG / ARTÍCULOS
     ===================================================================== */
  .blog-page {
    background: var(--cream);
  }

  .page-main {
    position: relative;
    z-index: var(--z-content);
    padding-top: 104px;
  }

  .article-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px var(--page-gutter) 40px;
  }

  /* ---- Portada completa del articulo + titular en glass ---- */
  .page-main.has-hero { padding-top: 0; }
  .page-main.has-hero .article-wrap { padding-top: clamp(30px, 5vh, 56px); }

  .article-hero {
    position: relative;
    width: 100%;
    min-height: clamp(380px, 62vh, 620px);
    display: flex;
    align-items: flex-end;
    padding: clamp(128px, 18vh, 200px) var(--page-gutter) clamp(34px, 6vh, 64px);
    overflow: hidden;
  }

  .article-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    z-index: 0;
  }

  /* Velo muy suave: la imagen se sigue viendo, el texto gana contraste */
  .article-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(243, 239, 230, 0.06) 42%,
      rgba(243, 239, 230, 0.42) 100%
    );
  }

  .article-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }

  /* Titular sobre cristal translucido (se ve la portada por detras) */
  .article-hero .article-head {
    margin-bottom: 0;
    padding: clamp(22px, 3vw, 36px);
    border-radius: clamp(20px, 2.4vw, 30px);
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }

  .article-hero .breadcrumb { margin-bottom: 16px; }
  .article-hero .article-eyebrow { background: rgba(255, 255, 255, 0.62); }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .article-hero .article-head { background: rgba(255, 255, 255, 0.78); }
  }

  @media (max-width: 620px) {
    .article-hero {
      min-height: clamp(320px, 56vh, 460px);
      padding-left: 20px;
      padding-right: 20px;
    }
    .article-hero-img { object-position: 42% center; }
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 24px;
  }
  .breadcrumb a { color: var(--muted); text-decoration: none; }
  .breadcrumb a:hover { color: var(--sage-dark); }
  .breadcrumb span { opacity: 0.55; }

  .article-head { margin-bottom: 30px; }

  .article-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sage-dark);
    background: rgba(124, 140, 104, 0.14);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
  }

  .article-title {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 4.2vw, 2.6rem);
    line-height: 1.15;
    color: var(--ink);
  }
  .article-title em { font-style: italic; color: var(--sage-dark); }

  .article-meta { margin-top: 14px; font-size: 0.85rem; color: var(--muted); }

  .prose { color: #383d30; font-size: 1.06rem; line-height: 1.75; }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--ink);
    margin-top: 1.8em;
  }
  .prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
  .prose li { line-height: 1.65; }
  .prose blockquote {
    border-left: 3px solid var(--sage);
    padding: 4px 0 4px 20px;
    margin: 1.4em 0;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--sage-dark);
  }

  .article-cta {
    margin: 46px 0 6px;
    padding: 32px 28px;
    border-radius: 24px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    text-align: center;
  }
  .article-cta h3 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .article-cta p { color: var(--muted); max-width: 52ch; margin: 0 auto 20px; }
  .article-cta .btn-solid { display: inline-flex; text-decoration: none; }

  .related { margin-top: 50px; }
  .related-title {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 18px;
    color: var(--ink);
  }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .blog-index-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
  .blog-index-head .article-title em { font-style: italic; color: var(--sage-dark); }
  .blog-index-grid { grid-template-columns: repeat(3, 1fr); }

  @media (max-width: 820px) {
    .related-grid, .blog-index-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .related-grid, .blog-index-grid { grid-template-columns: 1fr; }
  }

  /* =====================================================================
     SISTEMA TIPOGRÁFICO — Anton (titulares) · Playfair italic (marca/autoridad) · Helvetica (textos)
     ===================================================================== */
  .headline,
  .cs-title,
  .article-title,
  .blog-index-head .article-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .headline {
    font-size: clamp(1.35rem, 5vw, 3rem);
    line-height: 1.08;
    text-transform: uppercase;
    text-align: left;
    text-wrap: balance;
    max-width: 20ch;
  }

  /* Título glass: texto verde oliva "opaco" (frosted) + sombra difuminada
     verde oliva, sin borde/contorno. */
  .glass-title {
    /* Prueba: BD Renaissance (~Fraunces) en negro */
    color: #14140f;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    filter: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  }
  .glass-title em {
    color: #14140f;
  }

  /* Playfair Display italic: marca, frases de autoridad, cierres, acentos */
  .headline em,
  .cs-title em,
  .article-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
  }

  .hero-kicker,
  .footer-tagline,
  .prose blockquote,
  .testi-text {
    font-family: var(--font-serif);
    font-style: italic;
  }

  .hero-kicker {
    display: block;
    font-weight: 500;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    color: var(--sage-dark);
    margin-bottom: 12px;
    letter-spacing: 0.01em;
  }

  /* Helvetica: titulares medianos y todo el texto */
  .card-title,
  .step-title,
  .blog-title,
  .form-title,
  .related-title,
  .article-cta h3,
  .prose h2 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  .blog-all { display: flex; justify-content: center; margin-top: 34px; }
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid var(--sage);
    background: rgba(255, 255, 255, 0.35);
    color: var(--sage-dark);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
  }

  /* ===== Formulario multipaso + estados ===== */
  .fstep[hidden] { display: none; }

  .form-nav {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 4px;
  }
  .form-nav .btn-continue { flex: 1; margin-top: 0; }

  .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    color: var(--sage-dark);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .btn-back:hover { background: rgba(255, 255, 255, 0.65); }
  .btn-back[hidden] { display: none; }

  .form-status {
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
    color: var(--muted);
  }
  .form-status.is-ok { color: var(--sage-dark); font-weight: 500; }
  .form-status.is-err { color: #b1503a; font-weight: 500; }

  /* =====================================================================
     SECCIÓN "¿Te reconoces?" — composición con posiciones exactas del export
     Lienzo de referencia: 3811 x 2142 (posiciones convertidas a %).
     ===================================================================== */
  a.btn-solid { text-decoration: none; }

  /* La sección se alinea al ancho del navbar (max 1200, márgenes 16px) */
  #reconoces .cs-inner { max-width: var(--page-w); }
  #reconoces.content-section { padding-left: 16px; padding-right: 16px; }

  /* Lienzo recortado a la caja de contenido del export (2925x1632):
     sin los márgenes vacíos -> las imágenes llenan el ancho. */
  .recon-canvas {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 2925 / 1632;
  }

  /* CTA glass verde oliva (sin flecha, texto blanco) */
  .btn-glass {
    background: rgba(124, 140, 104, 0.5);
    color: #fff;
    border: 1px solid rgba(124, 140, 104, 0.6);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
      0 10px 26px rgba(95, 110, 77, 0.28),
      inset 0 1px 1px rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 2px rgba(60, 70, 45, 0.35);
  }
  .btn-glass:hover {
    background: rgba(95, 110, 77, 0.66);
    color: #fff;
    transform: translateY(-1px);
  }
  .recon-canvas figure { position: absolute; margin: 0; }

  /* Coords re-mapeadas a la caja de contenido 2925x1632 (origen 427,327) */
  /* Imagen grande destacada (vector-1-9) */
  .rc-feat {
    left: 33.50%;
    top: 0;
    width: 66.50%;
    height: 100%;
    z-index: 1;
  }
  .rc-feat img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 22px 44px rgba(70, 82, 55, 0.18));
  }
  .rc-feat figcaption {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 4%;
    color: #fff;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(30, 34, 22, 0.6);
    z-index: 2;
  }

  /* Miniaturas: 525x705, radio 72px */
  .rc-thumb {
    top: 0;
    width: 17.95%;
    height: 43.20%;
    overflow: hidden;
    border-radius: clamp(16px, 2vw, 28px);
    box-shadow: var(--glass-shadow);
    z-index: 2;
  }
  .rc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .rc-t1 { left: 0%; }
  .rc-t2 { left: 19.28%; }
  .rc-t3 { left: 38.56%; width: 17.98%; }

  .rc-thumb figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 14px 12px;
    color: #fff;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.75rem, 1.05vw, 1rem);
    line-height: 1.3;
    background: linear-gradient(transparent, rgba(43, 45, 35, 0.72));
  }

  /* Título + CTA en el área inferior-izquierda (bajo las miniaturas) */
  .rc-title {
    position: absolute;
    left: 0%;
    top: 52%;
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    z-index: 3;
  }
  .rc-title .cs-title {
    text-align: left;
    margin: 0;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3.8vw, 2.9rem);
    line-height: 1.02;
  }

  /* Móvil: composición del export (lienzo 1003x2130) con fondo propio */
  @media (max-width: 760px) {
    #reconoces.content-section { padding-left: 0; padding-right: 0; }

    .recon-canvas {
      position: relative;
      max-width: none;
      aspect-ratio: 1003 / 2130;
    }

    /* Imagen grande destacada */
    .rc-feat {
      left: 3.39%; top: 27.75%; width: 93.32%; height: 36.81%;
      z-index: 1;
    }
    .rc-feat img { width: 100%; height: 100%; object-fit: contain; }
    .rc-feat figcaption { left: 6%; right: 6%; bottom: 5%; font-size: clamp(0.95rem, 3.6vw, 1.2rem); padding: 0; text-shadow: 0 2px 10px rgba(30,34,22,0.7); }

    /* Miniaturas */
    .rc-t1 { left: 7.08%; top: 27.75%; width: 25.22%; height: 15.92%; z-index: 2; }
    .rc-t2 { left: 3.39%; top: 68.83%; width: 41.57%; height: 26.34%; z-index: 2; }
    .rc-t3 { left: 55.03%; top: 68.83%; width: 41.68%; height: 26.29%; z-index: 2; }
    .rc-t1 figcaption { display: none; } /* el espejo no lleva frase en móvil */
    .rc-thumb figcaption { font-size: clamp(0.62rem, 2.7vw, 0.85rem); padding: 22px 10px 9px; }

    /* Título + CTA arriba */
    .rc-title {
      left: 8%; top: 11.5%; width: 84%;
      display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
      z-index: 3;
    }
    .rc-title .cs-title { font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1; }
    .rc-title .btn-glass { width: 100%; justify-content: center; }
  }

  /* =====================================================================
     ESTILO GLASS con imagen — SOLO en el formulario del hero (una vez)
     ===================================================================== */
  .form-card {
    background: url("../assets/glass-card.webp") center / 100% 100% no-repeat !important;
    border: none !important;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(70, 82, 55, 0.20);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
  }
  .form-card::before,
  .form-card::after { content: none !important; }

  /* =====================================================================
     SECCIÓN "¿Cómo puedo acompañarte?" — bento de 4 tarjetas + guía PDF
     Geometría 1:1 del export de Figma:
       grupo de tarjetas 739 x 603 · guía 340 · marco de contenido 1095
       fila 1: 545 + 11 + 183   (la 02 sobresale 80 por arriba)
       fila 2: 439 + 11 + 289
     Las fotos son recortes del propio export (assets/serv/*.webp): el texto
     va en HTML sobre el cristal, así escala y se puede leer/indexar.
     ===================================================================== */
  #servicios .cs-inner { max-width: var(--page-w); }

  .serv-bento {
    display: grid;
    grid-template-columns: 739fr 16fr 340fr;
    align-items: stretch;
  }

  .serv-main {
    grid-column: 1;
    container-type: inline-size;
    display: grid;
    aspect-ratio: 739 / 603;
    grid-template-columns: 439fr 11fr 95fr 11fr 183fr;
    grid-template-rows: 80fr 270fr 11fr 242fr;
  }

  /* --- Encabezado: título + pastilla "Hablemos" (hueco sobre la tarjeta 01) --- */
  .serv-head {
    grid-column: 1 / 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: clamp(10px, 2cqw, 18px);
  }

  .serv-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.3rem, 4.3cqw, 2.4rem);
    line-height: 1.1;
    color: var(--ink);
  }

  .serv-cta {
    flex-shrink: 0;
    padding: 0.62em 1.5em;
    font-size: clamp(0.78rem, 1.75cqw, 1rem);
  }

  /* --- Tarjetas --- */
  .sv-card {
    position: relative;
    overflow: hidden;
    display: flex;
    border-radius: clamp(14px, 2.6cqw, 26px);
    background: var(--frost-bg-2);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);
    box-shadow: var(--glass-shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  .sv-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-hover);
  }

  .sv-1 { grid-column: 1 / 4; grid-row: 2; }
  .sv-2 { grid-column: 5;     grid-row: 1 / 3; }
  .sv-3 { grid-column: 1;     grid-row: 4; }
  .sv-4 { grid-column: 3 / 6; grid-row: 4; }

  /* La foto entra por el lado y se funde con el cristal (nada de bordes duros) */
  .sv-photo {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 14%, #000 40%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 14%, #000 40%);
  }

  /* La 02 es vertical: la foto entra por abajo */
  .sv-2 .sv-photo {
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 12%, #000 34%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 12%, #000 34%);
  }

  .sv-body {
    position: relative;
    z-index: 1;
    padding: clamp(20px, 6.1cqw, 54px) clamp(16px, 3cqw, 28px) clamp(16px, 3cqw, 28px);
  }

  /* Ancho del texto en cada tarjeta (el resto lo ocupa la foto) */
  /* La 02 es estrecha y alta: menos aire arriba para que el texto no
     llegue a pisar la foto del fondo */
  .sv-2 .sv-body { padding-top: clamp(18px, 4.6cqw, 40px); }

  .sv-1 .sv-body { width: 38%; }
  .sv-2 .sv-body { width: 100%; }
  .sv-3 .sv-body { width: 47%; }
  .sv-4 .sv-body { width: 70%; }

  .sv-num {
    display: block;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(20px, 3.9cqw, 32px);
    line-height: 1;
    color: #a2a083;
    margin-bottom: clamp(8px, 1.9cqw, 16px);
  }

  .sv-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(15px, 2.4cqw, 20px);
    line-height: 1.22;
    color: #1f1d18;
    margin-bottom: clamp(7px, 1.6cqw, 14px);
  }

  .sv-text {
    font-size: clamp(11.5px, 1.68cqw, 13.8px);
    line-height: 1.55;
    color: #4d4a43;
  }

  /* --- Tarjeta de la guía en PDF (columna derecha, alto completo) --- */
  .pdf-card {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.9vw, 14px);
    min-width: 0;
  }

  .pdf-cover-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: clamp(14px, 1.5vw, 22px);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
  }

  .pdf-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdf-dl {
    position: absolute;
    top: clamp(8px, 1vw, 14px);
    right: clamp(8px, 1vw, 14px);
    width: clamp(48px, 5vw, 62px);
    height: clamp(30px, 3.2vw, 38px);
  }

  .pdf-dl svg { width: 18px; height: 18px; }

  .pdf-btn {
    flex-shrink: 0;
    padding: 0.95em 1.4em;
    font-size: clamp(0.8rem, 0.95vw, 0.92rem);
    text-align: center;
  }

  /* --- Móvil / tablet: se rompe el bento y todo pasa a columna --- */
  @media (max-width: 900px) {
    .serv-bento {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .serv-main {
      grid-column: 1;
      aspect-ratio: auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .serv-head {
      padding-bottom: 4px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .serv-title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
    .serv-cta { font-size: 0.86rem; padding: 0.7em 1.5em; }

    .pdf-card { grid-column: 1; }

    .sv-card { min-height: 190px; }
    .sv-2 { min-height: 340px; }

    /* La foto ocupa una franja fija a la derecha: el texto siempre legible */
    .sv-photo {
      width: 46%;
      height: 100%;
      object-fit: cover;
      object-position: 60% center;
    }

    /* La 02 mantiene la foto abajo, pero solo en la mitad inferior */
    .sv-2 .sv-photo {
      width: 100%;
      height: 48%;
      object-position: center 40%;
    }

    .sv-1 .sv-body,
    .sv-3 .sv-body,
    .sv-4 .sv-body { width: 62%; }

    .sv-num { font-size: 26px; }
    .sv-title { font-size: 17px; }
    .sv-text { font-size: 13px; }

    .pdf-cover-wrap { aspect-ratio: 905 / 1310; max-width: 420px; width: 100%; }
    .pdf-card { align-items: stretch; }
  }

  @media (max-width: 560px) {
    .sv-card { min-height: 175px; }
    .sv-2 { min-height: 320px; }
    .sv-1 .sv-body,
    .sv-3 .sv-body,
    .sv-4 .sv-body { width: 66%; }
    .sv-photo {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 10%, #000 32%);
      mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 10%, #000 32%);
    }
  }

  /* =====================================================================
     SECCIÓN "¿Quién soy?" (Sobre mí) — retrato con forma orgánica
     Composición del Figma: bio a la izquierda, retrato recortado a la
     derecha que se sale por el borde de la pantalla, barra de valores
     abajo a la izquierda y cita centrada al pie.
     Sin fondo propio: se ve el vídeo de fondo del sitio.
     ===================================================================== */
  #sobre .cs-inner { max-width: var(--page-w); }

  .about-canvas {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    grid-template-areas:
      "copy  photo"
      "quote quote";
    grid-template-rows: auto auto;
    column-gap: clamp(20px, 3vw, 46px);
    align-items: start;
  }

  /* ---------- Columna de texto ---------- */
  .about-copy {
    grid-area: copy;
    padding-top: clamp(6px, 2vw, 26px);
  }

  .about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--olive);
    margin-bottom: 14px;
  }

  .about-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }

  .about-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.7rem, 3.1vw, 2.5rem);
    line-height: 1.08;
    color: #1a1815;
    margin-bottom: clamp(16px, 2vw, 26px);
  }

  .about-p {
    font-size: clamp(0.9rem, 1.02vw, 1rem);
    line-height: 1.72;
    color: #45423b;
    text-align: justify;
    hyphens: auto;
    max-width: 46ch;
  }

  .about-p + .about-p { margin-top: 1em; }
  .about-p b { font-weight: 600; color: #262319; }
  .about-p em { font-family: var(--font-serif); font-style: italic; color: var(--olive-deep); }

  /* Firma */
  .about-sign {
    margin-top: clamp(18px, 2.2vw, 28px);
    padding-left: 16px;
    border-left: 2px solid rgba(111, 124, 75, 0.45);
  }

  .about-sign-name {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.18rem;
    color: #262319;
  }

  .about-sign-role {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

  .about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 2.4vw, 30px);
  }

  .about-btn {
    padding: 0.82em 1.6em;
    font-size: 0.88rem;
  }

  /* ---------- Retrato ---------- */
  .about-photo {
    grid-area: photo;
    position: relative;
    /* se sale por el borde derecho de la pantalla, como en el diseño */
    margin-right: var(--page-bleed);
    align-self: stretch;
    display: flex;
    align-items: flex-start;
  }

  .about-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
  }

  /* Halo verde muy tenue detrás del recorte, para que no flote en el vacío */
  .about-halo {
    position: absolute;
    z-index: 0;
    left: 4%;
    top: 6%;
    width: 86%;
    aspect-ratio: 1;
    border-radius: 46% 54% 52% 48% / 48% 44% 56% 52%;
    background: radial-gradient(
      circle at 42% 38%,
      rgba(151, 164, 122, 0.34),
      rgba(151, 164, 122, 0) 68%
    );
    filter: blur(14px);
  }

  /* ---------- Barra de valores ---------- */
  /* Flotan sobre el retrato, en el sitio que ocupaba la chapa de ubicación */
  .about-values {
    position: absolute;
    z-index: 2;
    left: 40%;
    right: 4%;
    bottom: 9%;
    list-style: none;
    margin: 0;
    padding: clamp(14px, 1.5vw, 20px) clamp(6px, 1vw, 14px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 26px;
    /* Va encima de la foto: con blanco al 20% el tercer valor caía sobre la
       chaqueta oscura y no se leía. Aquí el cristal tiene que tapar más. */
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: blur(30px) saturate(140%) brightness(1.1);
    backdrop-filter: blur(30px) saturate(140%) brightness(1.1);
    box-shadow: 0 20px 50px rgba(60, 66, 45, 0.22);
  }

  .av-item {
    position: relative;
    padding: clamp(6px, 0.9vw, 12px) clamp(10px, 1.2vw, 18px);
    transition: transform 0.3s ease;
  }

  .av-item + .av-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(111, 124, 75, 0.28),
      transparent
    );
  }

  .av-item:hover { transform: translateY(-2px); }

  .av-icon {
    display: grid;
    place-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(111, 124, 75, 0.14);
    color: var(--olive-deep);
  }

  .av-icon svg { width: 16px; height: 16px; }

  .av-word {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    color: #1f1d18;
    margin-bottom: 3px;
  }

  .av-desc {
    display: block;
    font-size: clamp(0.72rem, 0.82vw, 0.8rem);
    line-height: 1.45;
    color: var(--muted);
  }

  /* ---------- Cita de cierre ---------- */
  .about-quote {
    grid-area: quote;
    margin: clamp(34px, 4.5vw, 62px) auto 0;
    max-width: 54ch;
    text-align: center;
    text-wrap: balance;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.95rem, 1.25vw, 1.15rem);
    line-height: 1.5;
    color: #3f3d35;
  }

  /* ---------- Tablet ---------- */
  @media (max-width: 980px) {
    /* En columna, los valores vuelven al flujo: sobre la foto no caben */
    .about-canvas {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .about-photo { order: 1; }
    .about-copy { order: 2; }
    .about-values { order: 3; position: static; margin-top: 26px; }
    .about-quote { order: 4; }

    .about-photo {
      margin-right: var(--page-bleed);
      margin-left: auto;
      width: min(520px, 92%);
    }

    .about-p { max-width: none; }
    .about-copy { padding-top: 18px; }
  }

  /* ---------- Móvil ---------- */
  @media (max-width: 620px) {
    .about-photo {
      display: block;
      width: min(420px, 100%);
      margin-right: var(--page-bleed);
    }

    .about-values {
      grid-template-columns: minmax(0, 1fr);
      gap: 2px;
      border-radius: 22px;
    }

    .av-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 12px;
      align-items: center;
      padding: 12px 14px;
    }

    .av-item + .av-item::before {
      left: 14px;
      right: 14px;
      top: 0;
      bottom: auto;
      width: auto;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(111, 124, 75, 0.28),
        transparent
      );
    }

    .av-icon { grid-row: 1 / 3; margin-bottom: 0; }
    .av-word { align-self: end; }
    .av-desc { align-self: start; }

    .about-p { text-align: left; }
    .about-actions .about-btn { flex: 1 1 auto; justify-content: center; }
  }

  /* =====================================================================
     CTA "primer paso" — banda de cierre: copy centrado + foto a sangre
     con el boton encajado en el hueco del recorte (38,1%-61,8% de ancho,
     del 92,2% al 100% de alto de la imagen)
     ===================================================================== */
  #empezar.content-section {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: clamp(46px, 6vh, 76px);
    overflow: hidden;
  }
  #empezar .cs-inner { max-width: none; }

  /* Halo verde muy suave detras del texto, para que no flote sobre plano */
  #empezar.content-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(1100px, 92vw);
    height: 62%;
    transform: translateX(-50%);
    background: radial-gradient(
      60% 70% at 50% 30%,
      rgba(124, 140, 104, 0.13),
      transparent 70%
    );
    pointer-events: none;
  }

  .cta-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(30px, 4vw, 56px);
  }

  .cta-copy {
    text-align: center;
    max-width: 780px;
    padding: 0 var(--page-gutter);
  }

  .cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(14px, 1.6vw, 22px);
    font-size: clamp(0.66rem, 0.8vw, 0.76rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sage-dark);
  }
  .cta-rule {
    display: block;
    width: clamp(26px, 3.4vw, 46px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sage));
  }
  .cta-rule + .cta-rule,
  .cta-eyebrow .cta-rule:last-child {
    background: linear-gradient(90deg, var(--sage), transparent);
  }

  .cta-title {
    text-align: center;
    font-size: clamp(1.85rem, 3.9vw, 3.05rem);
    line-height: 1.06;
    text-wrap: balance;
    margin: 0 0 clamp(12px, 1.4vw, 18px);
  }

  .cta-sub {
    max-width: 54ch;
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  }

  /* Fila de garantias: el detalle que ordena y da confianza */
  .cta-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 2.2vw, 34px);
    list-style: none;
    margin: clamp(22px, 2.6vw, 34px) 0 0;
    padding: 0;
  }
  .cta-meta li {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.78rem, 0.95vw, 0.9rem);
    color: var(--muted);
    letter-spacing: 0.01em;
  }
  .cta-meta li svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    color: var(--sage);
  }
  /* Separador fino entre items (solo cuando caben en una linea) */
  .cta-meta li + li::before {
    content: "";
    position: absolute;
    left: calc(clamp(14px, 2.2vw, 34px) / -2);
    top: 50%;
    width: 1px;
    height: 14px;
    transform: translateY(-50%);
    background: rgba(124, 140, 104, 0.35);
  }

  .cta-photo {
    position: relative;
    width: 100%;
    margin: 0;
    padding-bottom: clamp(12px, 1.8vw, 26px);
  }
  .cta-photo img {
    display: block;
    width: 100%;
    height: auto;
    /* la foto emerge del fondo crema en lugar de empezar con un corte */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 11%);
  }

  /* Boton encajado en el hueco inferior de la foto */
  .cta-photo-btn {
    position: absolute;
    left: 50%;
    bottom: clamp(12px, 1.8vw, 26px);
    transform: translate(-50%, 12%);
    white-space: nowrap;
    font-size: clamp(0.74rem, 0.92vw, 0.88rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.78em 1.5em;
    gap: 8px;
    background: var(--sage-dark);
    box-shadow:
      0 10px 26px rgba(70, 82, 55, 0.32),
      0 0 0 5px rgba(255, 255, 255, 0.5);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.35s ease, background 0.25s ease;
    z-index: 2;
  }
  .cta-photo-btn svg { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .cta-photo-btn:hover {
    transform: translate(-50%, 4%);
    background: #55643f;
    box-shadow:
      0 16px 34px rgba(70, 82, 55, 0.38),
      0 0 0 7px rgba(255, 255, 255, 0.6);
  }
  .cta-photo-btn:hover svg { transform: translateX(3px); }

  /* Movil: el hueco es demasiado pequeno -> el boton se monta en el borde */
  @media (max-width: 760px) {
    .cta-photo {
      padding-bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cta-photo-btn {
      position: relative;
      left: auto;
      bottom: auto;
      transform: none;
      display: inline-flex;
      margin: -20px auto 0;
      white-space: normal;
      font-size: 0.9rem;
      padding: 0.85em 1.6em;
    }
    .cta-photo-btn:hover { transform: translateY(-2px); }
    .cta-meta { gap: 10px 18px; }
    .cta-meta li + li::before { display: none; }
  }

  /* =====================================================================
     SISTEMA DE BOTONES GLASS (spec Figma)
     Blancos: bg-white/20 + borde blanco + pastilla.
     Verdes: el mismo cristal teñido de verde olivar. El relleno sube a
     0.62 (y no 0.20) porque con 0.20 el texto blanco no se lee sobre el
     fondo claro de la web; sigue siendo translúcido y esmerilado.
     ===================================================================== */
  .btn-glass,
  .navbar-cta,
  .navbar-toggle,
  .btn-solid,
  .btn-continue,
  .pdf-btn,
  .pdf-dl,
  .serv-cta,
  .cta-photo-btn,
  .bl-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    background: var(--frost-bg);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur-lite);
    backdrop-filter: var(--frost-blur-lite);
    color: var(--ink);
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(70, 82, 55, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .btn-glass:hover,
  .navbar-toggle:hover,
  .bl-all:hover {
    background: rgba(255, 255, 255, 0.34);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(70, 82, 55, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  /* --- Variante verde olivar --- */
  .btn-glass-green,
  .navbar-cta,
  .btn-solid,
  .btn-continue,
  .pdf-btn,
  .pdf-dl,
  .serv-cta,
  .cta-photo-btn {
    background: rgba(111, 124, 75, 0.62);
    border-color: rgba(255, 255, 255, 0.85);
    color: #fff;
  }

  .btn-glass-green:hover,
  .navbar-cta:hover,
  .btn-solid:hover,
  .btn-continue:hover,
  .pdf-btn:hover,
  .pdf-dl:hover,
  .serv-cta:hover,
  .cta-photo-btn:hover {
    background: rgba(111, 124, 75, 0.78);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(85, 96, 58, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  .btn-continue:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
  }

  /* El menu de 3 lineas sigue siendo solo de movil */
  .navbar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
  }

  @media (max-width: 860px) {
    .navbar-toggle { display: inline-flex; }

    .navbar-links {
      border-radius: 28px;
      background: var(--frost-bg-2);
      border: 1px solid var(--frost-border);
    }
    .navbar-links a { border-radius: var(--radius-pill); }
  }

  /* =====================================================================
     CONSENTIMIENTO DE DATOS (RGPD) — casilla obligatoria en los formularios
     ===================================================================== */
  .consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 2px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--muted);
  }

  /* El atributo hidden manda sobre el display:flex (paso 1 y 2 del hero) */
  .consent[hidden] { display: none; }

  .consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 6px;
    background: var(--frost-bg);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur-lite);
    backdrop-filter: var(--frost-blur-lite);
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .consent input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform 0.15s ease;
    background: #fff;
    clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
  }

  .consent input[type="checkbox"]:checked {
    background: rgba(111, 124, 75, 0.85);
    border-color: rgba(255, 255, 255, 0.9);
  }

  .consent input[type="checkbox"]:checked::before { transform: scale(1); }

  .consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
  }

  .consent label { cursor: pointer; }
  .consent a { color: var(--olive-deep); text-decoration: underline; }
  .consent a:hover { color: var(--olive); }

  /* =====================================================================
     SCROLL SUAVE EN MÓVIL
     El vídeo de fondo fijo + los blurs grandes eran lo que hacía que el
     scroll fuese a tirones en el teléfono: repintaba a pantalla completa
     en cada frame. En móvil el vídeo se sustituye por un fotograma fijo y
     el desenfoque baja de 28px a 14px (mismo aspecto, coste mucho menor).
     ===================================================================== */
  @media (max-width: 900px), (pointer: coarse) {
    :root {
      --glass-blur: blur(14px) saturate(150%);
      --glass-blur-lite: blur(10px) saturate(140%);
      --frost-blur: blur(14px) saturate(150%);
      --frost-blur-lite: blur(10px) saturate(140%);
    }

    .video-bg { display: none; }

    .bg-veil {
      background-image: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.70) 0%,
          rgba(248, 245, 238, 0.84) 45%,
          rgba(243, 239, 230, 0.94) 100%
        ),
        url("../assets/bg-still.webp");
      background-size: cover;
      background-position: center;
    }

    /* Sin hover táctil: los desplazamientos al pasar el dedo daban saltos */
    .sv-card:hover,
    .glass-card:hover,
    .media-card:hover,
    .blog-card:hover,
    .step-card:hover {
      transform: none;
    }
  }

  /* =====================================================================
     SECCIÓN BLOG (home) — panel glass grande + 3 tarjetas con la forma
     recortada del Figma (vector-42-274.svg: 313x157 con muesca abajo-dcha
     donde encaja la flecha). Clases propias `.bl-*`: las `.blog-*` las
     siguen usando las 9 páginas del blog y NO se tocan.
     ===================================================================== */
  /* Sin panel de cristal detrás (decidido 25 ago): solo contenedor.
     El cristal se queda en las fichas de cada tarjeta. */
  .blog-panel {
    position: relative;
  }

  .blog-panel .cs-head { margin-bottom: clamp(26px, 3vw, 44px); }

  .bl-h2 em {
    font-style: normal;
    color: var(--olive);
  }

  .blog-panel .cs-subtitle {
    letter-spacing: 0.06em;
  }

  .bl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 26px);
  }

  .bl-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s ease;
  }

  .bl-card:hover { transform: translateY(-4px); }

  .bl-media {
    aspect-ratio: 16 / 10;
    border-radius: clamp(14px, 1.4vw, 20px);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(60, 60, 40, 0.12);
  }

  .bl-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .bl-card:hover .bl-media img { transform: scale(1.04); }

  /* La ficha de texto: cristal recortado con la muesca del Figma.
     Se hace con mask (no con un <svg> de relleno) para que el desenfoque
     del fondo siga viéndose a través de la forma. */
  /* Contenedor de la ficha: la flecha va FUERA de .bl-note porque la
     mask recorta también a los hijos y la dejaba invisible */
  .bl-foot {
    position: relative;
    margin: -15% 6% 0;
    --bl-shape: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20313%20157%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M20%200C8.95431%200%200%208.95431%200%2020V137C0%20148.046%208.95431%20157%2020%20157H266C268.761%20157%20270.993%20154.76%20270.984%20151.999C270.933%20135.592%20271.421%20123%20288.5%20123H308C310.761%20123%20313%20120.761%20313%20118V20C313%208.95431%20304.046%200%20293%200H20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
  }

  /* Sombra con la MISMA silueta: un box-shadow saldría rectangular y
     delataría que la muesca es una máscara. Va por encima de la foto y
     por debajo del cristal, así la ficha se despega del fondo. */
  .bl-foot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(120, 105, 80, 0.14);
    -webkit-mask-image: var(--bl-shape);
    mask-image: var(--bl-shape);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    filter: blur(22px);
    transform: translateY(14px) scale(0.96);
  }

  .bl-note {
    padding: clamp(16px, 1.5vw, 22px) clamp(16px, 1.5vw, 22px)
      clamp(20px, 2vw, 28px);
    min-height: 8.5em;
    /* Más frost y más cuerpo: sin el panel detrás, con 0.26 el cristal se
       perdía sobre el fondo claro. El degradado da el brillo de cristal y
       el inset dibuja el filo de arriba (un border lo recortaría la mask). */
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.2) 55%,
      rgba(255, 255, 255, 0.28)
    );
    -webkit-backdrop-filter: blur(26px) saturate(135%) brightness(1.06);
    backdrop-filter: blur(26px) saturate(135%) brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 1;
    -webkit-mask-image: var(--bl-shape);
    mask-image: var(--bl-shape);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .bl-tag {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--olive);
    margin-bottom: 8px;
  }

  .bl-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(0.92rem, 1.05vw, 1.02rem);
    line-height: 1.32;
    color: var(--ink);
    margin-bottom: 7px;
    /* Todas las fichas con la misma altura: si no, la muesca se deforma */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .bl-excerpt {
    font-size: clamp(0.78rem, 0.86vw, 0.85rem);
    line-height: 1.5;
    color: #55524a;
    padding-right: 14%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Flecha encajada en la muesca */
  .bl-go {
    position: absolute;
    z-index: 2;
    right: 6.7%;
    bottom: 9%;
    transform: translate(50%, 50%);
    display: grid;
    place-content: center;
    width: clamp(26px, 2.2vw, 32px);
    height: clamp(26px, 2.2vw, 32px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    color: var(--olive-deep);
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .bl-go svg { width: 15px; height: 15px; }

  .bl-card:hover .bl-go {
    background: rgba(111, 124, 75, 0.72);
    color: #fff;
    transform: translate(50%, 50%) scale(1.08);
  }

  /* Pastilla "Ver todos" a caballo del borde inferior del panel */
  .bl-all {
    display: flex;
    width: 192px;
    max-width: 100%;
    height: 64px;
    margin: clamp(30px, 3.4vw, 48px) auto 0;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: #57534e;
  }

  @media (max-width: 980px) {
    .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl-foot { margin: -7% 5% 0; }
  }

  @media (max-width: 620px) {
    .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .bl-foot { margin: -8% 5% 0; }
    .bl-note { min-height: 0; }
    /* En columna única no hay que igualar alturas: cabe el titular entero */
    .bl-title { -webkit-line-clamp: 3; }
    .bl-excerpt { -webkit-line-clamp: 4; }
    .bl-all { width: 100%; }
  }

  /* =====================================================================
     BOTÓN DE WHATSAPP EN EL NAVBAR — solo icono, verde olivar
     ===================================================================== */
  .navbar-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--olive);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(85, 96, 58, 0.28);
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  }

  .navbar-wa svg { width: 19px; height: 19px; }

  .navbar-wa:hover {
    background: var(--olive-deep);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(85, 96, 58, 0.34);
  }

  .navbar-wa:focus-visible {
    outline: 2px solid var(--olive-deep);
    outline-offset: 3px;
  }

  /* =====================================================================
     LA GUÍA PIDE NOMBRE Y CORREO ANTES DE DESCARGARSE
     ===================================================================== */
  .lead-modal {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: min(720px, 92vw);
    width: 100%;
    color: var(--ink);
  }

  .lead-modal::backdrop {
    background: rgba(36, 40, 30, 0.52);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .lead-card {
    position: relative;
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    border-radius: 26px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);
    box-shadow: 0 30px 80px rgba(40, 46, 32, 0.34);
  }

  .lead-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .lead-body { padding: clamp(24px, 3vw, 34px); }

  .lead-eyebrow {
    display: block;
    font-family: var(--mono, inherit);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
    margin-bottom: 8px;
  }

  .lead-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    line-height: 1.14;
    color: var(--ink);
    margin-bottom: 10px;
  }

  .lead-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 18px;
  }

  .lead-card .field { margin-bottom: 10px; }
  .lead-card .btn-continue { width: 100%; margin-top: 6px; }
  .lead-card .consent { margin: 12px 0 4px; }

  .lead-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-content: center;
    border: 1px solid var(--frost-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .lead-close:hover { background: #fff; }

  .lead-ok {
    padding: clamp(28px, 4vw, 42px);
    text-align: center;
  }

  .lead-ok h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 10px;
  }

  .lead-ok p { color: var(--muted); font-size: 0.92rem; max-width: 42ch; margin: 0 auto; }

  @media (max-width: 620px) {
    .lead-card { grid-template-columns: minmax(0, 1fr); }
    .lead-cover { height: 168px; }
  }

  /* =====================================================================
     LÍNEA QUE UBICA EL TITULAR
     El H1 es una promesa emocional; esto dice qué se vende y dónde.
     ===================================================================== */
  .hero-ubica {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: clamp(0.78rem, 1vw, 0.88rem);
    letter-spacing: 0.06em;
    color: var(--olive-deep);
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    background: var(--frost-bg);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur-lite);
    backdrop-filter: var(--frost-blur-lite);
  }

  .hero-ubica i { font-style: normal; opacity: 0.45; }

  /* =====================================================================
     CÓMO ES TRABAJAR JUNTAS — qué pasa después de escribir
     ===================================================================== */
  .proc-row {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 22px);
    counter-reset: paso;
  }

  .proc-step {
    position: relative;
    padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 26px);
    border-radius: clamp(18px, 2vw, 26px);
    background: var(--frost-bg-2);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);
    box-shadow: var(--glass-shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  .proc-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-hover);
  }

  /* El hilo que une los pasos: el orden aquí sí significa algo */
  .proc-step + .proc-step::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(12px, 1.6vw, 22px) - 1px);
    top: 46px;
    width: clamp(12px, 1.6vw, 22px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(111, 124, 75, 0.4));
  }

  .proc-num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1;
    color: #a2a083;
    margin-bottom: clamp(12px, 1.4vw, 18px);
  }

  .proc-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    line-height: 1.2;
    color: #1f1d18;
    margin-bottom: 9px;
  }

  .proc-text {
    font-size: clamp(0.83rem, 0.96vw, 0.92rem);
    line-height: 1.6;
    color: #4d4a43;
  }

  /* =====================================================================
     AGENDA — reservar sin esperar a que alguien conteste
     ===================================================================== */
  .agenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 2.5vw, 34px);
    margin-bottom: clamp(26px, 3.4vw, 44px);
    padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 38px);
    border-radius: clamp(20px, 2.4vw, 30px);
    background: var(--frost-bg-2);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);
    box-shadow: var(--glass-shadow);
  }

  .agenda-copy { flex: 1 1 320px; min-width: 0; }

  .agenda-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
    margin-bottom: 8px;
  }

  .agenda-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .agenda-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--muted);
    max-width: 54ch;
  }

  .agenda-btn {
    flex-shrink: 0;
    padding: 0.95em 1.8em;
    font-size: 0.92rem;
  }

  @media (max-width: 980px) {
    .proc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proc-step + .proc-step::before { display: none; }
  }

  @media (max-width: 620px) {
    .proc-row { grid-template-columns: minmax(0, 1fr); }
    .agenda { flex-direction: column; align-items: stretch; text-align: left; }
    .agenda-btn { justify-content: center; }
  }

  /* =====================================================================
     QA MÓVIL (27 ago) — bugs encontrados revisando la web en el teléfono
     ===================================================================== */

  /* BUG: en columna, el `flex: 1 1 320px` del texto de la agenda se
     aplicaba al ALTO y dejaba 197 px de hueco vacío bajo el párrafo. */
  @media (max-width: 620px) {
    .agenda-copy { flex: 0 1 auto; }
  }

  /* Objetivos táctiles: por debajo de ~40 px se falla el dedo */
  @media (pointer: coarse) {
    .pdf-dl { height: 40px; width: 56px; }
    .footer-col a,
    .footer-col span { padding: 10px 0; }
    .footer-col { gap: 0; }
    .consent input[type="checkbox"] { width: 22px; height: 22px; }
    .consent input[type="checkbox"]::before { width: 12px; height: 12px; }
  }

  /* Texto por debajo de 12 px: en el móvil no se lee */
  @media (max-width: 620px) {
    .bl-tag,
    .cta-eyebrow,
    .agenda-eyebrow,
    .about-eyebrow,
    .form-eyebrow,
    .form-step,
    .av-desc,
    .consent,
    .form-footer { font-size: 0.75rem; }
    .cs-eyebrow { font-size: 0.78rem; }
  }

  /* =====================================================================
     ANIMACIONES — en móvil eran demasiado lentas
     Duración 1,15 s + espera 260 ms + escalonado de hasta 840 ms hacía que
     al bajar rápido con el dedo casi todo se viera a medio aparecer.
     ===================================================================== */
  @media (max-width: 900px), (pointer: coarse) {
    .js .content-section {
      transition-duration: 0.55s;
      transform: translateY(16px);
    }

    .js .content-section.is-visible { transition-delay: 0ms; }

    .js .content-section .reveal-item {
      transform: translateY(18px);
      transition-duration: 0.5s;
    }

    /* El escalonado se recorta: como mucho 240 ms de diferencia */
    .js .content-section.is-visible .reveal-item {
      transition-delay: min(var(--rd, 0ms), 240ms);
    }
  }

  /* Datos de la sesión, donde se decide reservar */
  .agenda-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--olive-deep);
  }

  .agenda-meta li { display: inline-flex; align-items: center; gap: 7px; }

  .agenda-meta li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--olive);
    opacity: 0.65;
  }

  /* =====================================================================
     RETIRO DE MUJERES — evento con @meet_belen
     ===================================================================== */
  .retiro {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 52px);
    align-items: center;
    padding: clamp(24px, 3vw, 42px);
    border-radius: clamp(22px, 2.6vw, 34px);
    background: var(--frost-bg-2);
    border: 1px solid var(--frost-border);
    -webkit-backdrop-filter: var(--frost-blur);
    backdrop-filter: var(--frost-blur);
    box-shadow: var(--glass-shadow);
  }

  .retiro-media {
    position: relative;
    border-radius: clamp(18px, 2vw, 26px);
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(60, 66, 45, 0.22);
  }

  .retiro-media img {
    width: 100%;
    height: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
  }

  .retiro-sello {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: var(--frost-blur-lite);
    backdrop-filter: var(--frost-blur-lite);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--olive-deep);
  }

  .retiro-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
    margin-bottom: 10px;
  }

  .retiro-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.7vw, 2.1rem);
    line-height: 1.12;
    color: var(--ink);
    margin-bottom: 14px;
  }

  .retiro-title em { font-style: italic; color: var(--olive-deep); }

  .retiro-text {
    font-size: clamp(0.86rem, 1vw, 0.95rem);
    line-height: 1.62;
    color: #4d4a43;
    max-width: 56ch;
  }

  .retiro-text + .retiro-text { margin-top: 0.85em; }
  .retiro-text b { color: #262319; font-weight: 600; }

  .retiro-datos {
    list-style: none;
    display: grid;
    gap: 7px;
    margin: clamp(16px, 2vw, 22px) 0;
    padding: clamp(14px, 1.6vw, 18px) clamp(16px, 1.8vw, 20px);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 0.86rem;
    color: #4d4a43;
  }

  .retiro-datos b {
    display: inline-block;
    min-width: 84px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--olive);
  }

  .retiro-datos a { color: var(--olive-deep); text-decoration: underline; }
  .retiro-datos a:hover { color: var(--olive); }

  .retiro-nota {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.92rem, 1.15vw, 1.05rem);
    line-height: 1.45;
    color: #3f3d35;
    padding-left: 16px;
    border-left: 2px solid rgba(111, 124, 75, 0.45);
    max-width: 50ch;
  }

  .retiro-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(18px, 2.2vw, 26px);
  }

  .retiro-btn { padding: 0.82em 1.5em; font-size: 0.88rem; }

  .retiro-pie {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--muted);
  }

  @media (max-width: 860px) {
    .retiro { grid-template-columns: minmax(0, 1fr); }
    .retiro-media img { max-height: 300px; }
  }

  @media (max-width: 620px) {
    .retiro-acciones .retiro-btn { flex: 1 1 auto; justify-content: center; }
    .retiro-datos b { display: block; min-width: 0; margin-bottom: 1px; }
  }

  /* =====================================================================
     PÁGINAS LEGALES (aviso legal · privacidad · cookies)
     Reutilizan .article-wrap y .prose del blog; solo añaden el pie de
     navegación entre las tres.
     ===================================================================== */
  .legal-wrap .prose h2 { font-size: 1.32rem; }
  .legal-wrap .prose h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 1.4em;
  }
  .legal-wrap .prose ul { gap: 0.35em; }
  .legal-wrap .prose a { color: var(--sage-dark); }

  .legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(38px, 6vh, 64px);
    padding-top: clamp(20px, 3vh, 30px);
    border-top: 1px solid rgba(124, 140, 104, 0.22);
  }
  .legal-nav a {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(124, 140, 104, 0.12);
    color: var(--sage-dark);
    font-size: 0.86rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .legal-nav a:hover {
    background: rgba(124, 140, 104, 0.22);
    transform: translateY(-1px);
  }

  /* =====================================================================
     BANNER DE COOKIES — glass, abajo a la izquierda, no tapa la web
     ===================================================================== */
  .cookie-banner {
    position: fixed;
    left: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 2vw, 24px);
    z-index: 200;
    width: min(420px, calc(100vw - 24px));
    padding: clamp(18px, 2vw, 24px);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inset);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cookie-banner.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .cookie-text {
    margin: 0 0 16px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ink);
  }
  .cookie-text a { color: var(--sage-dark); }

  .cookie-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cookie-btn {
    flex: 1 1 auto;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  }
  .cookie-no {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(124, 140, 104, 0.35);
    color: var(--sage-dark);
  }
  .cookie-no:hover { background: rgba(255, 255, 255, 0.8); }
  .cookie-si {
    background: var(--sage-dark);
    color: #fff;
    box-shadow: 0 8px 20px rgba(95, 110, 77, 0.28);
  }
  .cookie-si:hover { background: #55643f; transform: translateY(-1px); }

  @media (prefers-reduced-motion: reduce) {
    .cookie-banner { transition: none; }
  }

  .legal-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid rgba(124, 140, 104, 0.35);
    background: rgba(124, 140, 104, 0.12);
    color: var(--sage-dark);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .legal-btn:hover {
    background: rgba(124, 140, 104, 0.22);
    transform: translateY(-1px);
  }

  /* =====================================================================
     PORTADA EN MÓVIL — legibilidad del titular y una sola acción
     El titular se quedaba en 21,6 px (el mínimo del clamp), más pequeño
     que cualquier titular de sección, y en negro sobre la foto. Y el
     formulario de 3 pasos ocupaba media pantalla en la portada.
     ===================================================================== */
  .hero-acciones { display: none; }

  @media (max-width: 760px) {
    /* Velo claro bajo el texto: la foto se sigue viendo, el texto se lee */
    .hero-content::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        rgba(250, 247, 241, 0.10) 0%,
        rgba(250, 247, 241, 0.34) 28%,
        rgba(250, 247, 241, 0.72) 52%,
        rgba(247, 243, 235, 0.88) 100%
      );
    }
    .hero-copy { position: relative; z-index: 1; }

    .headline {
      font-size: clamp(2rem, 8.4vw, 2.6rem);
      line-height: 1.06;
      max-width: 15ch;
      /* Halo claro: para texto oscuro sobre foto clara funciona mejor que
         una sombra oscura, que solo lo ensucia */
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px rgba(255, 255, 255, 0.55);
    }
    .hero-kicker { font-size: 1rem; }
    .subline { font-size: 1.02rem; color: #4c5443; }
    .hero-ubica { font-size: 0.82rem; }
    .title-block { margin-bottom: 22px; }

    /* Fuera el formulario de 3 pasos; el completo sigue en Contacto */
    .form-card { display: none; }

    .hero-acciones {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 340px;
    }
    .hero-acciones .btn-solid,
    .hero-acciones .btn-ghost {
      justify-content: center;
      width: 100%;
      padding: 15px 24px;
      font-size: 0.95rem;
    }
    .hero-acciones .btn-solid {
      box-shadow: 0 10px 26px rgba(70, 82, 55, 0.3);
    }
    .hero-acciones .btn-ghost {
      background: rgba(255, 255, 255, 0.62);
    }
  }