:root {
      --paper: #f6f1e8;
      --ink: #221c16;
      --muted: #4a433b;
      --line: #e0d5c6;
      --card: #fffdf8;
      --green: #0d5c38;
      --green-press: #09442a;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: "Source Sans 3", "Segoe UI", sans-serif;
      font-size: 1.0625rem;
      line-height: 1.45;
      padding-bottom: 80px; /* espacio para la barra sticky del CTA */
    }
    ::selection { background: #efd3b4; color: var(--ink); }
    img { max-width: 100%; min-width: 0; display: block; }
    a { color: #8c3418; text-underline-offset: 0.18em; }
    :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
    .skip { position: absolute; left: 12px; top: -48px; background: var(--ink); color: #fff; padding: 8px 12px; }
    .skip:focus { top: 8px; }
    .frame { width: min(480px, calc(100% - 24px)); margin: 0 auto; }
    header { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; }
    .brand {
      color: var(--ink);
      font-family: Fraunces, Georgia, serif;
      font-weight: 700;
      font-size: 1.2rem;
      letter-spacing: -0.03em;
      text-decoration: none;
    }
    header a.aviso { color: var(--ink); font-weight: 600; text-decoration: none; }
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }
    .cover {
      margin: 0;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: 0 14px 32px rgba(34, 28, 22, 0.12);
      overflow: hidden;
    }
    .cover img {
      width: 100%;
      height: 168px;
      object-fit: cover;
      object-position: center 28%;
    }
    .cover div { padding: 14px 16px 16px; }
    .cover strong {
      display: block;
      font-family: Fraunces, Georgia, serif;
      font-size: 1.55rem;
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .cover span { display: block; margin-top: 8px; color: var(--muted); font-size: 0.98rem; }
    h1 {
      margin: 0;
      font-family: Fraunces, Georgia, serif;
      font-weight: 700;
      font-size: clamp(2.15rem, 8vw, 3.6rem);
      line-height: 0.98;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }
    .lede { margin: 12px 0 16px; font-size: 1.05rem; }
    .cta {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 52px;
      padding: 12px 16px;
      background: var(--green);
      color: #fff;
      font-weight: 600;
      text-align: center;
      text-decoration: none;
      border-radius: 4px;
    }
    .cta:hover { background: var(--green-press); }
    .cta { gap: 10px; animation: pulso 2.4s ease-out infinite; }
    .cta .wa { flex: none; }
    .n777 {
      padding: 0 6px;
      background: #ffe27a;
      color: var(--ink);
      font-size: 1.15em;
      border-radius: 3px;
    }
    @keyframes pulso {
      0%   { box-shadow: 0 0 0 0 rgba(13, 92, 56, 0.45); }
      70%  { box-shadow: 0 0 0 12px rgba(13, 92, 56, 0); }
      100% { box-shadow: 0 0 0 0 rgba(13, 92, 56, 0); }
    }
    @media (prefers-reduced-motion: reduce) { .cta { animation: none; } }
    .fine { margin: 8px 0 0; color: var(--muted); font-size: 0.98rem; }
    .pasos {
      margin: 0 0 12px;
      padding: 12px 14px;
      background: var(--card);
      border: 1px solid var(--line);
      border-left: 4px solid var(--green);
      border-radius: 4px;
      font-size: 0.98rem;
    }
    .pasos p { margin: 0 0 6px; }
    .pasos ol { margin: 0; padding-left: 1.25em; }
    .pasos li { margin: 0 0 4px; }
    .puntos {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }
    .puntos li {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px 14px 12px;
    }
    .puntos strong {
      display: block;
      margin-bottom: 4px;
      font-family: Fraunces, Georgia, serif;
      font-size: 1.15rem;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }
    .puente { margin: 22px 0 12px; max-width: 62ch; }
    .quien { margin: 18px 0 0; max-width: 62ch; }
    #aviso { margin-top: 32px; color: var(--muted); font-size: 0.95rem; max-width: 68ch; }
    #aviso h2 {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: Fraunces, Georgia, serif;
      font-size: 1.25rem;
      letter-spacing: -0.03em;
    }
    #aviso p { margin: 0 0 8px; }
    footer {
      margin-top: 22px;
      padding: 14px 0 28px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.9rem;
    }
    footer p { margin: 0 0 6px; }
    footer a { color: var(--muted); }
    .sticky-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 10px 14px max(env(safe-area-inset-bottom), 10px);
      background: rgba(246, 241, 232, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-top: 1px solid var(--line);
      box-shadow: 0 -4px 16px rgba(34, 28, 22, 0.08);
      transform: translateY(100%);
      transition: transform 0.28s ease;
    }
    .sticky-bar.visible { transform: translateY(0); }
    .sticky-bar .cta {
      display: flex;
      width: 100%;
      animation: pulso 2.4s ease-out infinite;
    }
    @media (min-width: 800px) {
      .sticky-bar .cta { max-width: 480px; margin: 0 auto; }
    }
    @media (prefers-reduced-motion: reduce) { .sticky-bar .cta { animation: none; } }
    @media (max-width: 799px) {
      .cover { order: 2; }
      /* imagen más corta en móvil para que el CTA quede sobre el fold */
      .cover img { height: 130px; }
      /* reduce el gap del hero para que el CTA suba más */
      .hero { gap: 10px; }
      /* h1 un poco más compacto en pantallas medianas */
      h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); }
      /* más espacio entre secciones reducido */
      .puntos { margin-top: 20px; }
      .puente { margin-top: 16px; }
      .quien { margin-top: 14px; }
      /* aviso un poco más compacto */
      #aviso { margin-top: 24px; }
    }
    /* pantallas muy pequeñas: ≤380px (iPhone SE, Galaxy A series) */
    @media (max-width: 380px) {
      .frame { width: calc(100% - 20px); }
      h1 { font-size: 1.95rem; }
      .pasos { padding: 10px 12px; }
      .puntos li { padding: 12px 12px 10px; }
      .cover div { padding: 10px 12px 12px; }
      .cover strong { font-size: 1.35rem; }
    }
    @media (min-width: 800px) {
      /* 桌面上页面居中显示移动端宽度，不切双栏 */
      body { padding-bottom: 0; }
      .sticky-bar .cta { max-width: 480px; margin: 0 auto; }
    }
  
body{padding-bottom:0}.cta,.sticky-bar .cta{animation:none}.cta[disabled]{opacity:.65;cursor:not-allowed;border:0;font:inherit}.frame{padding-bottom:24px}section{scroll-margin-top:20px}h2{line-height:1.2}.cover img{height:190px}.disclosures{padding:16px;background:var(--card);border:1px solid var(--line)}
/* Accessible bottom action after the introductory content leaves view. */
.scroll-join[hidden]{display:none!important}
.scroll-join{position:fixed;bottom:0;left:0;right:0;z-index:100;background:#f6f1e8;border-top:1px solid #e0d5c6;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(34,28,22,.08)}
.scroll-join .cta{max-width:480px;margin:0 auto;animation:none;font-size:1rem}
body.has-scroll-join{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.cover img{height:220px;object-position:center 45%}
@media(max-width:380px){.cover img{height:190px}.brand{font-size:1.1rem}}

/* Text remains accessible HTML over the supplied cover photograph. */
.cover.cover-integrated{position:relative;isolation:isolate;min-height:340px;background:#101b20;border:0;border-radius:10px}
.cover.cover-integrated img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% center;z-index:-2}
.cover.cover-integrated::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,14,20,.04) 10%,rgba(5,14,20,.35) 42%,rgba(5,14,20,.96) 100%)}
.cover.cover-integrated>div{position:relative;padding:190px 24px 26px;color:#fff}
.cover.cover-integrated strong{font-size:clamp(1.65rem,6vw,2.15rem);line-height:1.08;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.cover.cover-integrated span{color:#f1f4f3;font-size:1rem;line-height:1.5;max-width:35ch;margin-top:12px}
@media(max-width:380px){.cover.cover-integrated{min-height:310px}.cover.cover-integrated>div{padding:165px 18px 22px}.cover.cover-integrated strong{font-size:1.7rem}}