/* ══════════════════════════════════════════════════════════
     TOKENS — Kapüy Design System (Claude Design). Se definen una
     sola vez; el resto del archivo solo lee variables.
     Regla: nunca texto lima sobre marfil. Sobre lima, texto carbón
     o morado. Los acentos de texto van en bloque lima con texto
     morado (.acento), nunca morado suelto sobre marfil.
     ══════════════════════════════════════════════════════════ */
  :root {
    /* Los cuatro */
    --marfil: #F4F1E8;
    --carbon: #20211F;
    --morado: #3C183C;
    --lima:   #CDFC8A;

    /* Pasos de apoyo del sistema */
    --marfil-hondo: #E9E4D6;
    --marfil-linea: #CFC9B8;
    --carbon-suave: #4A4B47;
    --carbon-mudo:  #6E6F69;
    --carbon-linea: #3A3B38;
    --morado-hondo: #2A0F2A;
    --morado-linea: #5A3358;
    --morado-ola:   #6B3A6B;
    --lima-hondo:   #B6EA6C;
    --critico:      #FF9C8F;
    --marfil-82: rgba(244, 241, 232, 0.82);
    --marfil-70: rgba(244, 241, 232, 0.70);
    --marfil-50: rgba(244, 241, 232, 0.50);

    /* Tipografía */
    --font-sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, Menlo, monospace;

    /* Retícula */
    --ancho: 1440px;
    --gutter: clamp(16px, 6.6vw, 96px);
    --radio: 2px;
    --regla: 1.5px;
    --regla-gruesa: 3px;
    --dur: 140ms;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--marfil);
    color: var(--carbon);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
  h1, h2, h3, h4 { font-weight: 700; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: var(--carbon); }
  a:hover { color: var(--morado); }
  ::selection { background: var(--lima); color: var(--morado); }
  :focus-visible { outline: 2px solid var(--morado); outline-offset: 3px; }
  .oscuro :focus-visible { outline-color: var(--lima); }
  [hidden] { display: none !important; }

  .wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }

  /* ── Piezas del sistema ─────────────────────────────────── */
  /* Acento: bloque lima con texto morado, solo en las palabras a resaltar */
  .acento {
    font-style: normal;
    background: var(--lima);
    color: var(--morado);
    padding: 0 .12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* Eyebrow: Space Mono caps con guion corto debajo como cierre */
  .eb {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em;
    text-transform: uppercase; line-height: 1.6;
    display: flex; flex-direction: column; gap: 12px;
    color: var(--morado);
  }
  .eb::after { content: ""; width: 22px; border-top: 2px solid currentColor; }
  .oscuro .eb { color: var(--lima); }
  .mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }

  .btn {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; line-height: 1; white-space: nowrap; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 17px 28px;
    border-radius: var(--radio); border: var(--regla) solid transparent;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
  }
  .btn--lima { background: var(--lima); color: var(--carbon); }
  .btn--lima:hover { background: var(--lima-hondo); color: var(--carbon); }
  .btn--linea { border-color: var(--carbon); color: var(--carbon); background: transparent; }
  .btn--linea:hover { background: var(--carbon); color: var(--marfil); }
  .btn--linea-clara { border-color: var(--marfil); color: var(--marfil); background: transparent; }
  .btn--linea-clara:hover { background: var(--marfil); color: var(--morado); }
  .btn--morado { background: var(--morado); color: var(--marfil); }
  .btn--morado:hover { background: var(--morado-hondo); color: var(--marfil); }
  .btn--sm { min-height: 44px; padding: 13px 20px; font-size: 12px; }
  .btn:disabled { opacity: .5; cursor: default; }

  .logo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-decoration: none; }
  .logo img { height: 30px; width: auto; display: block; }
  .logo span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--carbon); }

  /* Elementos gráficos: pixeles y mareas */
  .px { position: absolute; width: 24px; height: 24px; }
  .mareas { position: absolute; pointer-events: none; }

  /* ── Header ─────────────────────────────────────────────── */
  .hdr {
    position: sticky; top: 0; z-index: 20;
    background: var(--marfil);
    border-bottom: var(--regla) solid var(--carbon);
  }
  .hdr .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
  .nav { display: flex; align-items: center; gap: 36px; }
  .nav a.l { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }

  /* Selector de idioma */
  .idioma { display: inline-flex; border: var(--regla) solid var(--carbon); border-radius: var(--radio); }
  .idioma button {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
    background: transparent; color: var(--carbon); border: 0; cursor: pointer;
    min-width: 44px; min-height: 40px; padding: 0 10px;
  }
  .idioma button + button { border-left: var(--regla) solid var(--carbon); }
  .idioma button[aria-pressed="true"] { background: var(--carbon); color: var(--marfil); }

  /* ── 1. Hero ────────────────────────────────────────────── */
  .hero { position: relative; overflow: hidden; }
  .hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; padding-top: clamp(64px, 10.4vw, 150px); padding-bottom: clamp(120px, 11.8vw, 170px); }
  .hero h1 { font-size: clamp(52px, 9.2vw, 132px); line-height: 1; letter-spacing: -.04em; max-width: 1100px; }
  .hero .lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--carbon-suave); max-width: 720px; }
  .fila { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
  .hero .mareas { left: 0; right: 0; bottom: -10px; width: 100%; height: 260px; }

  /* ── 2. Qué hacemos (morado) ────────────────────────────── */
  .oferta { background: var(--morado); color: var(--marfil); }
  .oferta .wrap { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 64px); padding-top: clamp(80px, 8.3vw, 120px); padding-bottom: clamp(80px, 8.3vw, 120px); }
  .bloque { display: flex; flex-direction: column; gap: 24px; }
  .oferta h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -.03em; color: var(--marfil); max-width: 900px; }
  .oferta .intro { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--marfil-82); max-width: 760px; }

  .partida { display: flex; justify-content: space-between; align-items: center; gap: 32px 48px; padding: clamp(28px, 3.9vw, 56px); background: var(--lima); color: var(--carbon); flex-wrap: wrap; }
  .partida > div { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
  .partida .eb { color: var(--morado); }
  .partida h3 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -.03em; color: var(--carbon); }
  .partida p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; max-width: 760px; }

  .servicios-titulo { color: var(--marfil-70); }
  .svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--regla) solid var(--marfil); }
  .svc > div { display: flex; flex-direction: column; gap: 16px; padding: 32px 28px 8px 0; border-right: 1px solid var(--morado-linea); min-height: 260px; }
  .svc > div + div { padding-left: 28px; }
  .svc > div:last-child { border-right: 0; }
  .svc .n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; color: var(--lima); }
  .svc h4 { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; color: var(--marfil); }
  .svc p { font-size: 16px; line-height: 1.5; color: var(--marfil-82); }
  .svc p.claim { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--lima); }

  .aliados { display: flex; justify-content: space-between; align-items: center; gap: 32px 48px; padding-top: 40px; border-top: 1px solid var(--morado-linea); flex-wrap: wrap; }
  .aliados h4 { margin-bottom: 10px; font-size: 26px; letter-spacing: -.02em; color: var(--marfil); }
  .aliados p { font-size: 17px; line-height: 1.5; color: var(--marfil-82); max-width: 860px; }

  /* ── 3. Para quién (marfil) ─────────────────────────────── */
  .pq .wrap { display: flex; flex-direction: column; gap: 56px; padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(80px, 9vw, 130px); }
  .pq h2 { font-size: clamp(34px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.03em; max-width: 1050px; }
  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .col { display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 3vw, 44px); }
  .col--si { border: var(--regla-gruesa) solid var(--carbon); }
  .col--no { border: var(--regla) solid var(--marfil-linea); }
  .col h3 { font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--morado); }
  .col--no h3 { color: var(--carbon-mudo); }
  .col ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.5; }
  .col--no ul { color: var(--carbon-suave); }
  .col li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
  .col li::before { content: ""; width: 9px; height: 9px; margin-top: 9px; background: var(--morado); }
  .col--no li::before { background: transparent; border: var(--regla) solid var(--carbon-mudo); width: 6px; height: 6px; }
  .col .nota { padding-top: 20px; border-top: 1px solid var(--marfil-linea); font-size: 16px; line-height: 1.5; color: var(--carbon-suave); }

  /* ── 4. Testimonios (carbón) ────────────────────────────── */
  .tst { background: var(--carbon); color: var(--marfil); }
  .tst .wrap { display: flex; flex-direction: column; gap: 56px; padding-top: clamp(80px, 7.6vw, 110px); padding-bottom: clamp(80px, 9vw, 130px); }
  .tst .bloque { gap: 20px; }
  .tst h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -.03em; color: var(--marfil); max-width: 900px; }
  .tst .sub { font-size: 16px; color: var(--marfil-70); }
  .citas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
  .citas figure { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding-top: 24px; border-top: var(--regla) solid var(--lima); min-height: 200px; }
  .citas blockquote { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--marfil); }
  .citas figure.pendiente blockquote { color: var(--marfil-50); }
  .citas figcaption { font-size: 15px; line-height: 1.5; color: var(--marfil); }
  .citas figcaption strong { font-weight: 700; }
  .citas figcaption span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--marfil-70); }
  /* Testimonio único (cita destacada) */
  .tst-uno { display: flex; flex-direction: column; gap: 40px; }
  .tst-uno blockquote { display: flex; flex-direction: column; gap: 40px; }
  .tst-frase { font-size: clamp(32px, 4.4vw, 60px); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; color: var(--marfil); max-width: 1000px; }
  .tst-texto { columns: 2; column-gap: 48px; font-size: 17px; line-height: 1.6; color: var(--marfil-70); padding-top: 28px; border-top: var(--regla) solid var(--lima); }
  .tst-texto p { margin: 0 0 1em; break-inside: avoid; }
  .tst-uno figcaption { font-size: 16px; line-height: 1.5; color: var(--marfil); display: flex; flex-direction: column; gap: 6px; }
  .tst-uno figcaption br { display: none; }
  .tst-uno figcaption span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--marfil-70); }
  .tst-uno figcaption small { font-size: 13px; color: var(--marfil-50); margin-top: 8px; max-width: 560px; }
  @media (max-width: 760px) { .tst-texto { columns: 1; font-size: 16px; } }

  /* ── 5. Cierre + contacto + footer (morado) ─────────────── */
  .cierre { background: var(--morado); color: var(--marfil); position: relative; overflow: hidden; }
  .cierre .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: clamp(96px, 10.4vw, 150px); padding-bottom: 64px; }
  .cierre h2 { font-size: clamp(48px, 7.2vw, 104px); line-height: 1; letter-spacing: -.04em; color: var(--marfil); max-width: 1100px; }
  .cierre .lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--marfil-82); max-width: 760px; }
  .cierre .agendar { margin-top: 8px; padding: 20px 36px; }
  .cierre .mareas { right: 0; top: 40px; width: 62%; height: 340px; }

  .contacto {
    width: 100%;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px;
    margin-top: clamp(64px, 7vw, 100px);
    padding-top: 40px;
    border-top: 1px solid var(--morado-linea);
  }
  .contacto .texto { display: flex; flex-direction: column; gap: 16px; }
  .contacto h3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.03em; color: var(--marfil); }
  .contacto .texto p { font-size: 17px; line-height: 1.5; color: var(--marfil-82); max-width: 520px; }
  .form { display: flex; flex-direction: column; gap: 18px; }
  .campo { display: flex; flex-direction: column; gap: 8px; }
  .campo label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--marfil-70); }
  .campo input, .campo textarea, .campo select {
    font-family: var(--font-sans); font-size: 16px; color: var(--marfil);
    background: var(--morado-hondo);
    border: var(--regla) solid var(--morado-linea); border-radius: var(--radio);
    padding: 14px 16px; width: 100%;
    transition: border-color var(--dur), box-shadow var(--dur);
  }
  .campo textarea { min-height: 112px; resize: vertical; }
  .campo input::placeholder, .campo textarea::placeholder { color: var(--marfil-50); }
  .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--lima); box-shadow: 4px 4px 0 var(--lima); }
  .check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; color: var(--marfil-82); cursor: pointer; }
  .check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lima); cursor: pointer; }
  .form .btn { align-self: flex-start; }
  .aviso { font-size: 16px; line-height: 1.5; }
  .aviso.ok { color: var(--lima); }
  .aviso.err { color: var(--critico); }

  .pie { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; margin-top: clamp(64px, 7vw, 100px); padding-top: 32px; border-top: var(--regla) solid var(--marfil); flex-wrap: wrap; }
  .pie .logo img { height: 26px; }
  .pie .logo span { color: var(--marfil); }
  .pie .links { display: flex; align-items: center; gap: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
  .pie .links a { color: var(--marfil); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
  .pie .links a:hover { color: var(--lima); }
  /* El correo va en Space Grotesk: en Space Mono la @ no se lee */
  .pie .links a.mail { font-family: var(--font-sans); font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; }

  /* ── Responsive ─────────────────────────────────────────── */
  @media (max-width: 980px) {
    .nav a.l { display: none; }
    .nav { gap: 12px; }
    .px-cluster { display: none; }
    .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
    .svc > div, .svc > div + div { border-right: 0; border-bottom: 1px solid var(--morado-linea); padding: 28px 0; min-height: 0; }
    .cols, .contacto { grid-template-columns: minmax(0, 1fr); }
    .citas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cierre .mareas { width: 100%; opacity: .6; }
  }
  @media (max-width: 640px) {
    .hdr .wrap { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
    .logo img { height: 22px; }
    .logo span { font-size: 8px; letter-spacing: .3em; }
    .nav { gap: 8px; }
    .idioma button { min-width: 38px; padding: 0 6px; font-size: 11px; }
    .nav .btn--sm { padding: 12px 14px; font-size: 11px; letter-spacing: .1em; }
    .hero .mareas { height: 160px; }
    .fila .btn { flex: 1 1 100%; }
    .partida .btn, .aliados .btn, .cierre .agendar, .form .btn { width: 100%; align-self: stretch; }
    .svc { grid-template-columns: minmax(0, 1fr); }
    .svc > div:last-child { border-bottom: 0; }
    .svc h4, .aliados h4 { font-size: 23px; }
    .col ul { font-size: 17px; }
    .citas {
      display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px;
      margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px;
      scroll-padding: 0 var(--gutter); scrollbar-width: none;
    }
    .citas::-webkit-scrollbar { display: none; }
    .citas figure { flex: 0 0 82%; scroll-snap-align: start; min-height: 180px; }
    .citas blockquote { font-size: 21px; }
    .pie { flex-direction: column; align-items: flex-start; }
    .pie .links { flex-direction: column; align-items: flex-start; gap: 0; }
  }
  @media (max-width: 360px) {
    .logo span { display: none; }
  }

  /* ══════════════════════════════════════════════════════════
     Páginas internas (Quiénes somos, Comunidad) y menú móvil
     ══════════════════════════════════════════════════════════ */
  .nav a.l[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

  /* Menú móvil: los links de página no pueden desaparecer en celular */
  .menu-btn {
    display: none;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    background: transparent; color: var(--carbon); cursor: pointer;
    border: var(--regla) solid var(--carbon); border-radius: var(--radio);
    min-height: 40px; padding: 0 12px;
  }
  .menu-panel { display: none; border-top: 1px solid var(--marfil-linea); }
  .menu-panel.abierto { display: block; }
  .menu-panel a {
    display: block; padding: 16px var(--gutter);
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    text-decoration: none; border-bottom: 1px solid var(--marfil-linea);
  }
  .menu-panel a[aria-current="page"] { background: var(--lima); color: var(--morado); }
  .nav a.l, .logo span { white-space: nowrap; }
  @media (max-width: 1180px) { .nav a.l { display: none; } .menu-btn { display: inline-flex; align-items: center; } }
  @media (min-width: 1181px) { .menu-panel, .menu-panel.abierto { display: none; } }

  /* Encabezado de página interna */
  .pagina-hero { position: relative; overflow: hidden; border-bottom: var(--regla) solid var(--carbon); }
  .pagina-hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(130px, 13vw, 190px); }
  .pagina-hero h1 { font-size: clamp(44px, 7.4vw, 104px); line-height: 1.12; letter-spacing: -.04em; max-width: 1000px; }
  .pagina-hero .lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--carbon-suave); max-width: 720px; }
  .pagina-hero .mareas { left: 0; right: 0; bottom: -10px; width: 100%; height: 150px; }

  .seccion .wrap { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
  .seccion h2 { font-size: clamp(32px, 4.5vw, 60px); line-height: 1.04; letter-spacing: -.03em; max-width: 960px; }
  .seccion .texto { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--carbon-suave); max-width: 680px; }
  .seccion .texto + .texto { margin-top: -12px; }
  .oscuro .seccion h2, .seccion.oscuro h2 { color: var(--marfil); }
  .seccion.oscuro .texto { color: var(--marfil-82); }
  .seccion.morado { background: var(--morado); color: var(--marfil); }
  .seccion.carbon { background: var(--carbon); color: var(--marfil); }

  /* Equipo: una tarjeta por persona. Pensado para crecer a 3. */
  .equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
  .persona { display: flex; flex-direction: column; gap: 18px; }
  .persona .foto {
    aspect-ratio: 4 / 5; background: var(--marfil-hondo);
    border: var(--regla-gruesa) solid var(--carbon);
    display: flex; align-items: flex-end; padding: 16px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--carbon-mudo);
    position: relative; overflow: hidden;
  }
  .persona .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .persona h3 { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
  .persona .rol { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--morado); }
  .persona p.bio { font-size: 17px; line-height: 1.55; color: var(--carbon-suave); }
  /* Con una sola persona: tarjeta horizontal (foto | texto) */
  @media (min-width: 761px) {
    .equipo:has(> .persona:only-child) { grid-template-columns: minmax(0, 1fr); }
    .persona:only-child { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 560px); column-gap: 56px; row-gap: 14px; align-content: start; }
    .persona:only-child > :not(.foto) { grid-column: 2; }
    .persona:only-child .foto { grid-column: 1; grid-row: 1 / span 7; align-self: start; position: sticky; top: 120px; }
    .persona:only-child h3 { font-size: 40px; align-self: end; margin-top: 8px; }
  }
  .pendiente-dato { background: var(--marfil-hondo); outline: 1px dashed var(--carbon-mudo); padding: 0 4px; }

  /* Valores: cuatro celdas en retícula editorial */
  .valores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--regla) solid var(--marfil); }
  .valores > div { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 8px 0; border-right: 1px solid var(--morado-linea); }
  .valores > div + div { padding-left: 24px; }
  .valores > div:last-child { border-right: 0; }
  .valores .n { font-family: var(--font-mono); font-size: 13px; color: var(--lima); }
  .valores h3 { font-size: 28px; letter-spacing: -.02em; color: var(--marfil); }
  .valores p { font-size: 16px; line-height: 1.5; color: var(--marfil-82); }
  .lema { font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--lima); max-width: 860px; }

  /* Pasos numerados */
  .pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: var(--regla) solid var(--carbon); }
  .pasos > div { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 8px 0; }
  .pasos > div + div { padding-left: 24px; border-left: 1px solid var(--marfil-linea); }
  .pasos .n { font-family: var(--font-mono); font-size: 13px; color: var(--morado); font-weight: 700; }
  .pasos h3 { font-size: 22px; letter-spacing: -.02em; }
  .pasos p { font-size: 16px; line-height: 1.5; color: var(--carbon-suave); }

  /* Caso destacado */
  .caso { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; padding: clamp(28px, 4vw, 56px); border: var(--regla-gruesa) solid var(--carbon); background: var(--marfil); color: var(--carbon); }
  .caso .quien { display: flex; flex-direction: column; gap: 14px; }
  .caso h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
  .caso ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.5; }
  .caso li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
  .caso li::before { content: ""; width: 9px; height: 9px; margin-top: 9px; background: var(--morado); }

  /* Cierre compacto de páginas internas */
  .cierre-corto .wrap { padding-top: clamp(80px, 9vw, 130px); }
  .cierre-corto h2 { font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.04em; color: var(--marfil); max-width: 900px; }

  @media (max-width: 980px) {
    .valores, .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .valores > div, .valores > div + div, .pasos > div, .pasos > div + div { border: 0; border-bottom: 1px solid var(--morado-linea); padding: 24px 0; }
    .pasos > div, .pasos > div + div { border-bottom-color: var(--marfil-linea); }
    .caso { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 640px) {
    .valores, .pasos { grid-template-columns: minmax(0, 1fr); }
    .menu-btn { padding: 0 10px; font-size: 10.5px; }
  }

  /* Header en celular: logo + ES/EN + Menú + Hablemos tienen que caber en 375px.
     El tagline sale del header (sigue en el footer). */
  @media (max-width: 480px) {
    .hdr .logo span { display: none; }
    .hdr .nav { gap: 6px; }
    .idioma button { min-width: 34px; padding: 0 4px; }
    .menu-btn { padding: 0 8px; }
    .nav .btn--sm { padding: 12px 10px; font-size: 10.5px; letter-spacing: .08em; }
  }

  /* Apoyo a la comunidad en la home */
  .comunidad-home { border-top: var(--regla) solid var(--carbon); }
  .comunidad-home .fila { display: flex; flex-wrap: wrap; gap: 12px; }
  .comunidad-home .textos { display: flex; flex-direction: column; gap: 14px; }

  /* Formulario de postulación (/comunidad) */
  .form-postula { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-width: 900px; margin-top: 8px; }
  .form-postula .ancho { grid-column: 1 / -1; }
  .form-postula .campo[hidden] { display: none; }
  .campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lima) 50%), linear-gradient(135deg, var(--lima) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
  .campo select option { color: var(--carbon); background: var(--marfil); }
  .campo [aria-invalid="true"] { border-color: var(--critico); }
  @media (max-width: 760px) { .form-postula { grid-template-columns: minmax(0, 1fr); } }
  .persona p.bio-cierre { color: var(--carbon); font-weight: 600; padding-left: 16px; border-left: var(--regla-gruesa) solid var(--lima); }

  /* ── Home · conversión (2026-10-02) ─────────────────────────── */
  .hero .micro { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; line-height: 1.6; color: var(--carbon-mudo); margin-top: -12px; }
  .hero .wrap:has(.micro) { padding-bottom: clamp(170px, 15vw, 220px); }

  .tst-mas summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lima); }
  .tst-mas summary::-webkit-details-marker { display: none; }
  .tst-mas summary::after { content: " +"; }
  .tst-mas[open] summary::after { content: " −"; }
  .tst-mas[open] .tst-texto { margin-top: 24px; }

  .empezamos { background: var(--marfil-hondo); }
  .pasos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .quien-llamada { display: flex; align-items: center; gap: 16px; }
  .quien-llamada img { width: 64px; height: 64px; object-fit: cover; object-position: center 20%; border: 2px solid var(--lima); flex: none; }
  .quien-llamada p { font-size: 16px; line-height: 1.45; color: var(--marfil-82); max-width: 440px; }
  .quien-llamada strong { color: var(--marfil); font-weight: 600; }

  .contacto .diag { font-size: 16px; }
  .contacto .diag a { color: var(--lima); }

  /* ── Ronda 3 (2026-10-02) ───────────────────────────────────── */
  /* Puente de /comunidad hacia la oferta pagada */
  .puente { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; width: 100%; padding-top: 40px; border-top: 1px solid var(--morado-linea); }
  .puente > div { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
  .puente h3 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.03em; color: var(--marfil); }
  .puente p { font-size: 17px; line-height: 1.5; color: var(--marfil-82); }

  /* Página legal */
  .legal .wrap { gap: 48px; }
  .legal .wrap > * { max-width: 760px; }
  .pagina-hero--corto .wrap { padding-bottom: clamp(56px, 7vw, 96px); }
  .legal-bloque { display: flex; flex-direction: column; gap: 14px; }
  .legal-bloque h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }
  .legal-bloque p, .legal-bloque li { font-size: 17px; line-height: 1.6; color: var(--carbon-suave); }
  .legal-bloque ul { display: flex; flex-direction: column; gap: 12px; padding-left: 0; list-style: none; }
  .legal-bloque li { padding-left: 20px; position: relative; }
  .legal-bloque li::before { content: "·"; position: absolute; left: 4px; color: var(--morado); font-weight: 700; }
  .legal-bloque strong { color: var(--carbon); }

  /* Aviso para navegadores en inglés en las páginas en español */
  .aviso-idioma { display: block; padding: 10px var(--gutter); background: var(--carbon); color: var(--marfil); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; text-align: center; }
  .aviso-idioma:hover { color: var(--lima); }

  /* ── Pop-up del diagnóstico ─────────────────────────────────── */
  .pop-diag {
    position: fixed; right: 24px; bottom: 24px; z-index: 60; width: min(380px, calc(100vw - 48px));
    display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 24px;
    background: var(--morado); color: var(--marfil); border: var(--regla) solid var(--lima);
    box-shadow: 8px 8px 0 var(--carbon);
    transform: translateY(24px); opacity: 0; transition: transform .3s ease, opacity .3s ease;
  }
  .pop-diag.abierto { transform: none; opacity: 1; }
  .pop-diag .eb { color: var(--lima); }
  .pop-h { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
  .pop-p { font-size: 15px; line-height: 1.5; color: var(--marfil-82); }
  .pop-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
  .pop-no, .pop-x { background: none; border: 0; color: var(--marfil-70); cursor: pointer; font-family: var(--font-mono); }
  .pop-no { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; min-height: 40px; }
  .pop-no:hover, .pop-x:hover { color: var(--lima); }
  .pop-x { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; font-size: 24px; line-height: 1; }
  @media (max-width: 640px) {
    /* Franja abajo, nunca pantalla completa */
    .pop-diag { right: 0; left: 0; bottom: 0; width: auto; padding: 20px var(--gutter) 18px; gap: 8px; box-shadow: none; border-width: var(--regla) 0 0; }
    .pop-h { font-size: 20px; padding-right: 32px; }
    .pop-p { font-size: 14px; }
    .pop-fila .btn { flex: 1; }
    /* Compacta: en celular basta la × para cerrar */
    .pop-diag .eb, .pop-no { display: none; }
    .pop-fila { margin-top: 2px; }
  }
  @media (prefers-reduced-motion: reduce) { .pop-diag { transition: none; } }

  /* ── La grieta: letras recortadas (2026-10-02) ──────────────────
     Variantes del papel: paleta de marca + tres tipos de imprenta.
     Nunca texto lima sobre marfil; nunca morado sobre carbón. */
  .recorte { font-style: normal; }
  .rc-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rc-pal { white-space: nowrap; display: inline-block; }
  .rc {
    display: inline-block; line-height: .92; padding: .05em .07em .02em; margin: 0 .012em;
    transform: translateY(var(--alto, 0)) rotate(var(--giro, 0deg));
    box-shadow: .03em .04em 0 rgba(32, 33, 31, .22);
  }
  .rc--0 { background: var(--lima); color: var(--morado); font-weight: 700; clip-path: polygon(2% 4%, 97% 0, 100% 93%, 4% 100%); }
  .rc--1 { background: var(--carbon); color: var(--marfil); font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; clip-path: polygon(0 2%, 100% 6%, 95% 100%, 3% 96%); }
  .rc--2 { background: var(--marfil-hondo); color: var(--carbon); font-family: var(--font-mono); font-weight: 700; font-size: .86em; clip-path: polygon(4% 0, 100% 3%, 97% 97%, 0 100%); }
  .rc--3 { background: var(--morado); color: var(--lima); font-weight: 600; clip-path: polygon(0 5%, 96% 0, 100% 100%, 2% 95%); }
  .rc--4 { background: var(--marfil); color: var(--morado); font-family: 'Times New Roman', Times, serif; font-weight: 700; outline: 1.5px solid var(--carbon); outline-offset: -1.5px; font-size: 1.04em; }
  .rc--5 { background: var(--lima); color: var(--carbon); font-family: 'Courier New', Courier, monospace; font-weight: 700; font-size: .9em; clip-path: polygon(3% 3%, 100% 0, 98% 96%, 0 100%); }
  .rc--6 { background: var(--carbon); color: var(--lima); font-weight: 500; font-size: .94em; clip-path: polygon(0 0, 97% 4%, 100% 98%, 5% 100%); }
  @media (prefers-reduced-motion: no-preference) {
    .hero h1 .rc { transition: transform .25s ease; }
    .hero h1:hover .rc { transform: translateY(0) rotate(0deg); }
  }