/* Nort Studio — sistema visual.
   Orden de capas explícito: sin esto, .seccion y .cta terminan cancelándose los
   márgenes según quién se escribió último. */
@layer reinicio, base, disposicion, componentes, movimiento, utilidades;

/* Una sola familia con dos personalidades: Archivo tiene eje de ancho, así que los
   titulares van expandidos y el cuerpo normal. Sale más barato que dos familias y no
   se parece al par tipográfico que usa todo el mundo. */
@font-face {
  font-family: "Archivo"; font-style: normal;
  font-weight: 400 700; font-stretch: 62% 125%; font-display: swap;
  src: url("fuentes/archivo.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Martian Mono"; font-style: normal;
  font-weight: 400 600; font-display: swap;
  src: url("fuentes/martian-mono.woff2") format("woff2");
}

@layer base {
  :root {
    --tinta: #0A0B0D;
    --tinta-2: #101216;
    --tinta-3: #1A1D23;
    --tinta-4: #272B33;
    --hueso: #E8E0D6;
    --hueso-2: #F5F2ED;
    --tenue: #82868E;
    --acento: #F5F2ED;
    --acento-2: #FFFFFF;
    --acento-hondo: #D0C9BE;
    --papel: #EDE7DE;
    --papel-tinta: #171414;
    --papel-tenue: #5A5450;

    --f: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-reloj: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --t-xs: clamp(0.66rem, 0.64rem + 0.10vw, 0.72rem);
    --t-sm: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
    --t-base: clamp(1rem, 0.96rem + 0.20vw, 1.09rem);
    --t-md: clamp(1.15rem, 1.06rem + 0.42vw, 1.42rem);
    --t-lg: clamp(1.55rem, 1.30rem + 1.20vw, 2.30rem);
    --t-xl: clamp(2.10rem, 1.62rem + 2.35vw, 3.35rem);
    --t-2xl: clamp(2.60rem, 1.85rem + 3.70vw, 4.70rem);

    --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 40px;
    --e5: 64px; --e6: 96px; --e7: 140px;

    --carril: 96px;
    --ancho: 1200px;
    --curva: 6px;
  }

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

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--tinta);
    color: var(--hueso);
    font-family: var(--f);
    font-size: var(--t-base);
    line-height: 1.62;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Los titulares van expandidos y muy ajustados de tracking: es lo que separa esta
     tipografía de una grotesca cualquiera puesta en grande. */
  h1, h2, h3 {
    font-weight: 600;
    font-stretch: 118%;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--hueso-2);
    text-wrap: balance;
  }
  h1 { font-size: var(--t-2xl); }
  h2 { font-size: var(--t-lg); }
  h3 { font-size: var(--t-md); font-stretch: 106%; letter-spacing: -0.015em; }
  p { text-wrap: pretty; }
  a { color: inherit; }
  img, svg { display: block; max-width: 100%; height: auto; }
  button, input, textarea { font: inherit; color: inherit; }

  :where(a, button, input, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 3px;
  }
  ::selection { background: var(--acento); color: var(--tinta); }
}

@layer disposicion {
  .env { width: min(100% - var(--e4), var(--ancho)); margin-inline: auto; position: relative; z-index: 1; }

  .rejilla { display: grid; grid-template-columns: var(--carril) minmax(0, 1fr); gap: var(--e3); }
  .rejilla > .hora { grid-column: 1; padding-top: 0.5em; }
  .rejilla > :not(.hora) { grid-column: 2; }
  @media (width < 940px) {
    .rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
    .rejilla > * { grid-column: 1; }
    .rejilla > .hora { padding-top: 0; }
  }

  .columna { max-width: 66ch; }
  .angosta { max-width: 52ch; }

  .seccion { padding-block: var(--e6); border-top: 1px solid var(--tinta-3); position: relative; }
  @media (width < 700px) { .seccion { padding-block: var(--e5); } }

  .clara { background: var(--papel); color: var(--papel-tinta); border-top: 0; }
  .clara h1, .clara h2, .clara h3 { color: var(--papel-tinta); }
}

@layer componentes {
  /* ── textura: la retícula y el radar del fondo ────────────────────────────
     Es lo que hace que el sitio se lea como un instrumento y no como un folleto.
     Va detrás de todo y no recibe clics. */
  .fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .fondo-malla {
    position: absolute; inset: -1px;
    background-image:
      linear-gradient(to right, color-mix(in oklab, var(--hueso) 5%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in oklab, var(--hueso) 5%, transparent) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, transparent 72%);
  }
  .fondo-radar { position: absolute; right: -20%; top: -46%; width: min(80vw, 940px); aspect-ratio: 1; opacity: .34; }
  .fondo-marca {
    position: absolute; left: -5%; bottom: -40%; width: min(40vw, 470px);
    opacity: .04; color: var(--hueso);
  }
  .fondo-brillo {
    position: absolute; left: 8%; top: 22%; width: min(52vw, 620px); aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in oklab, var(--acento) 7%, transparent) 0%, transparent 62%);
    filter: blur(30px);
  }
  @media (width < 820px) { .fondo-marca, .fondo-radar { display: none; } }

  /* ── la hora y los rótulos: la voz de máquina ─────────────────────────── */
  .hora, .rotulo {
    font-family: var(--f-reloj); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: 0.10em; color: var(--tenue);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .rotulo { text-transform: uppercase; letter-spacing: 0.16em; }
  .clara .hora, .clara .rotulo { color: var(--papel-tenue); }
  /* Sin color de acento, el énfasis de un rótulo lo hace el brillo. */
  .rotulo-fuerte { color: var(--hueso-2); }

  /* ── marca ─────────────────────────────────────────────────────────────── */
  .marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
  .marca-n { width: 26px; height: 26px; flex: none; color: var(--hueso-2); }
  .marca-n .diagonal { opacity: .55; }
  .marca-texto {
    font-size: 13px; font-weight: 500; font-stretch: 108%;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--hueso-2);
    padding-right: 0.24em;
  }

  .saltar {
    position: absolute; left: var(--e2); top: var(--e2); z-index: 100;
    padding: var(--e1) var(--e2); background: var(--acento); color: var(--tinta);
    font-weight: 600; text-decoration: none; border-radius: var(--curva);
    transform: translateY(-250%);
  }
  .saltar:focus { transform: none; }

  /* ── cabecera ─────────────────────────────────────────────────────────── */
  .cab {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in oklab, var(--tinta) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--tinta-3);
  }
  .cab-fila { display: flex; align-items: center; gap: var(--e3); min-height: 70px; }

  .nav { display: flex; align-items: center; gap: var(--e3); }
  .nav > a {
    font-family: var(--f-reloj); font-size: var(--t-xs); letter-spacing: 0.12em;
    text-transform: uppercase; text-decoration: none; color: var(--tenue);
    position: relative; padding-block: 6px;
  }
  .nav > a::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: var(--acento); transform: scaleX(0); transform-origin: left;
  }
  .nav > a:hover, .nav > a[aria-current="page"] { color: var(--hueso-2); }
  .nav > a[aria-current="page"]::after { transform: scaleX(1); }

  .reloj { display: flex; align-items: center; gap: 7px; }
  :where(.nav) .reloj { display: none; }
  .reloj-punto {
    width: 6px; height: 6px; border-radius: 50%; background: var(--acento); flex: none;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 14%, transparent);
  }

  .hamburguesa {
    display: none; width: 42px; height: 42px; padding: 12px 9px;
    background: none; border: 1px solid var(--tinta-3); border-radius: var(--curva);
    cursor: pointer; flex-direction: column; justify-content: space-between;
  }
  .hamburguesa span:not(.solo-lectores) { display: block; height: 1.5px; background: var(--hueso); }

  @media (width < 1080px) { :where(.cab-fila) > .reloj { display: none; } }

  @media (width < 900px) {
    .hamburguesa { display: flex; }
    .nav {
      position: fixed; inset: 71px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
      background: var(--tinta); border-bottom: 1px solid var(--tinta-3);
      padding: var(--e2) max(var(--e3), (100vw - var(--ancho)) / 2) var(--e3);
    }
    .nav:not(.abierto) { display: none; }
    .nav > a { padding-block: var(--e2); border-bottom: 1px solid var(--tinta-3); font-size: var(--t-sm); }
    :where(.nav) .reloj { display: flex; padding-top: var(--e3); }
  }
  .reloj[hidden] { display: none; }

  /* ── botones ──────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px var(--e3); border: 1px solid var(--tinta-4); border-radius: var(--curva);
    background: none; color: var(--hueso-2);
    font-family: var(--f-reloj); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: 0.10em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; white-space: nowrap; position: relative;
  }
  .btn:hover { border-color: var(--hueso); }
  .btn-principal {
    background: var(--acento); border-color: var(--acento); color: var(--tinta); font-weight: 600;
  }
  .btn-principal:focus-visible { outline-color: var(--acento); outline-offset: 4px; }
  .btn-principal:hover { background: var(--acento-2); border-color: var(--acento-2); }
  .btn-principal:active { transform: translateY(1px); }
  .clara .btn { border-color: color-mix(in oklab, var(--papel-tinta) 24%, transparent); color: var(--papel-tinta); }
  .clara .btn:hover { border-color: var(--papel-tinta); }
  .acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

  /* ── fichas ───────────────────────────────────────────────────────────── */
  .fichas { display: flex; flex-wrap: wrap; gap: var(--e1); }
  .ficha {
    font-family: var(--f-reloj); font-size: var(--t-xs); letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--tenue);
    padding: 7px 13px; border: 1px solid var(--tinta-3); border-radius: 999px;
  }

  /* ── portada ──────────────────────────────────────────────────────────── */
  .portada { padding-block: var(--e7) var(--e6); position: relative; }
  @media (width < 700px) { .portada { padding-block: var(--e5) var(--e5); } }
  .portada-par {
    display: grid; gap: var(--e5) var(--e4);
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
  }
  @media (width < 1000px) { .portada-par { grid-template-columns: minmax(0, 1fr); gap: var(--e5); } }

  .portada h1 { font-size: var(--t-xl); max-width: 15ch; margin-top: var(--e3); }
  .portada .bajada { margin-top: var(--e3); color: var(--tenue); font-size: var(--t-md); max-width: 44ch; }
  .portada .fichas { margin-top: var(--e4); }
  .portada .acciones { margin-top: var(--e3); }

  /* ── el panel del asistente: lo que se vende, funcionando ─────────────── */
  .panel {
    border: 1px solid var(--tinta-3); border-radius: 10px; background: var(--tinta-2);
    box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9);
    overflow: hidden; display: flex; flex-direction: column; min-height: 400px;
  }
  .panel-cab {
    display: flex; align-items: center; gap: var(--e1);
    padding: 13px var(--e2); border-bottom: 1px solid var(--tinta-3);
    background: color-mix(in oklab, var(--hueso) 3%, transparent);
  }
  .panel-cab .marca-n { width: 17px; height: 17px; }
  .panel-cab .rotulo { margin-right: auto; letter-spacing: 0.14em; color: var(--hueso-2); }
  .panel-cuerpo { padding: var(--e3) var(--e2); display: grid; gap: var(--e2); flex: 1; align-content: start; }

  .dice-persona {
    justify-self: end; max-width: 88%;
    padding: 12px var(--e2); border-radius: 10px 10px 2px 10px;
    background: var(--tinta-3); color: var(--hueso-2); font-size: var(--t-sm); line-height: 1.5;
  }
  .dice-asistente {
    max-width: 94%; padding-left: var(--e2);
    border-left: 2px solid var(--acento); font-size: var(--t-sm); line-height: 1.55;
  }
  .dice-asistente .rotulo { display: block; margin-bottom: 5px; color: var(--acento); }

  .escribiendo-puntos { display: none; gap: 5px; padding-left: var(--e2); align-items: center; height: 20px; }
  .escribiendo-puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--tenue); display: block; }

  .panel-pie { border-top: 1px solid var(--tinta-3); padding: 11px; }
  .panel-pie .btn { width: 100%; justify-content: space-between; }

  .chat-vivo { min-height: 400px; }
  .chat-vivo iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }

  /* ── capacidades ──────────────────────────────────────────────────────── */
  .capacidad { padding-block: var(--e3); border-top: 1px solid var(--tinta-3); }
  .capacidad:first-of-type { border-top: 0; padding-top: 0; }
  .capacidad h3 { margin-bottom: 6px; }
  .capacidad p { color: var(--tenue); max-width: 58ch; }

  .pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; gap: 0; }
  .pasos li { counter-increment: paso; padding-block: var(--e3); border-top: 1px solid var(--tinta-3); }
  .pasos li::before {
    content: counter(paso, decimal-leading-zero);
    font-family: var(--f-reloj); font-size: var(--t-xs); color: var(--acento);
    letter-spacing: 0.10em; display: block; margin-bottom: 7px;
  }
  .pasos strong { font-weight: 600; color: var(--hueso-2); }
  .pasos span { color: var(--tenue); }

  /* ── planes ───────────────────────────────────────────────────────────── */
  .planes { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); align-items: stretch; }
  .plan {
    display: flex; flex-direction: column; gap: var(--e2);
    padding: var(--e3); background: var(--tinta-2);
    border: 1px solid var(--tinta-3); border-radius: 10px; position: relative; overflow: hidden;
  }
  .plan-destacado { border-color: color-mix(in oklab, var(--acento) 45%, var(--tinta-3)); }
  .plan-destacado::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--acento), transparent);
  }
  .plan-nombre { font-family: var(--f-reloj); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); }
  .plan-destacado .plan-nombre { color: var(--acento); }
  .plan-precio { font-size: var(--t-lg); font-stretch: 112%; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--hueso-2); font-variant-numeric: tabular-nums; }
  .plan-precio small { font-size: var(--t-xs); font-family: var(--f-reloj); color: var(--tenue); letter-spacing: 0.06em; font-weight: 400; }
  .plan-mensajes { font-family: var(--f-reloj); font-size: var(--t-xs); color: var(--tenue); letter-spacing: 0.06em; margin-top: -6px; }
  .plan ul { list-style: none; padding: 0; margin: 0; flex: 1; display: grid; gap: 9px; align-content: start; }
  .plan li { font-size: var(--t-sm); padding-left: var(--e2); position: relative; color: var(--tenue); line-height: 1.5; }
  .plan li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 7px; height: 1px; background: var(--acento); }
  .plan-cupos {
    font-family: var(--f-reloj); font-size: var(--t-xs); letter-spacing: 0.10em;
    color: var(--acento); text-transform: uppercase;
  }

  /* ── preguntas ────────────────────────────────────────────────────────── */
  .pregunta { padding-block: var(--e3); border-top: 1px solid var(--tinta-3); }
  .pregunta h3 { font-size: var(--t-base); font-stretch: 100%; font-weight: 600; letter-spacing: 0; margin-bottom: 5px; }
  .pregunta p { color: var(--tenue); max-width: 60ch; }

  /* ── formulario ───────────────────────────────────────────────────────── */
  .campos { display: grid; gap: var(--e2); max-width: 34rem; }
  .campo { display: grid; gap: 7px; }
  .campo label { font-family: var(--f-reloj); font-size: var(--t-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--tenue); }
  .campo input, .campo textarea {
    padding: 12px var(--e2); background: var(--tinta-2);
    border: 1px solid var(--tinta-3); border-radius: var(--curva); width: 100%;
  }
  .campo input:hover, .campo textarea:hover { border-color: var(--tinta-4); }
  .campo textarea { min-height: 132px; resize: vertical; }
  .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .aviso {
    padding: var(--e2); border: 1px solid var(--acento); border-radius: var(--curva);
    background: color-mix(in oklab, var(--acento) 9%, transparent);
    margin-bottom: var(--e3); max-width: 34rem;
  }

  .par { display: grid; gap: var(--e5); grid-template-columns: 1fr 1fr; align-items: start; }
  @media (width < 880px) { .par { grid-template-columns: 1fr; gap: var(--e4); } }

  /* ── pie ──────────────────────────────────────────────────────────────── */
  .pie { border-top: 1px solid var(--tinta-3); padding-block: var(--e4); color: var(--tenue); font-size: var(--t-sm); }
  .pie-fila { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
  .pie nav { display: flex; flex-wrap: wrap; gap: var(--e3); margin-right: auto; }
  .pie a { text-decoration: none; }
  .pie a:hover { color: var(--hueso-2); }

  .solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ─── movimiento ───────────────────────────────────────────────────────────
   Se activa, no se desactiva: el estado por defecto es el quieto. Si alguien
   añade una animación fuera de este bloque, se nota enseguida. */
@layer movimiento {
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    .nav > a, .nav > a::after, .btn, .plan, .campo input, .campo textarea,
    .marca-n, .ficha { transition: 200ms cubic-bezier(.2,.7,.3,1); }
    .nav > a:hover::after { transform: scaleX(1); }
    .plan:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--acento) 38%, var(--tinta-3)); }
    .ficha:hover { border-color: var(--tinta-4); color: var(--hueso); }
    .marca:hover .marca-n { color: var(--acento); }

    /* El radar gira lento y en silencio. Es atmósfera, no un elemento que pide
       atención: veinte segundos por vuelta y opacidad baja. */
    .radar-barrido { transform-origin: 50% 50%; animation: girar 22s linear infinite; }
    .radar-anillo { animation: latir 5s ease-in-out infinite; }
    .radar-anillo:nth-of-type(2) { animation-delay: 1.2s; }
    .radar-anillo:nth-of-type(3) { animation-delay: 2.4s; }

    /* Entrada de la portada, escalonada. */
    [data-entra] { opacity: 0; animation: subir 620ms cubic-bezier(.16,.9,.3,1) both; animation-delay: var(--retraso, 0ms); }

    /* La conversación se escribe sola una vez, con puntos suspensivos antes de
       la respuesta: es como se comporta el producto de verdad. */
    .escribiendo [data-turno]:not(.dicho) { opacity: 0; }
    .escribiendo .panel-pie { opacity: .35; pointer-events: none; }
    [data-turno].dicho { animation: subir 460ms cubic-bezier(.16,.9,.3,1) both; }
    .escribiendo .escribiendo-puntos.activo { display: flex; }
    .escribiendo-puntos i { animation: rebote 1.1s ease-in-out infinite; }
    .escribiendo-puntos i:nth-child(2) { animation-delay: .16s; }
    .escribiendo-puntos i:nth-child(3) { animation-delay: .32s; }

    [data-revelar] { opacity: 0; }
    [data-revelar].visible { animation: subir 420ms cubic-bezier(.16,.9,.3,1) both; animation-delay: var(--retraso, 0ms); }

    @keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes girar { to { transform: rotate(360deg); } }
    @keyframes latir { 0%, 100% { opacity: .30; } 50% { opacity: .70; } }
    @keyframes rebote { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
  }
}

@layer utilidades {
  .tenue { color: var(--tenue); }
  .clara .tenue { color: var(--papel-tenue); }
  .grande { font-size: var(--t-md); }
  .ancho-completo { grid-column: 1 / -1 !important; }
  .sep { margin-top: var(--e3); }
  .sep-g { margin-top: var(--e4); }
}

@layer componentes {
  /* Cabecera de las páginas interiores: la portada tiene su propio ritmo, estas
     comparten uno más corto para que el contenido no arranque demasiado abajo. */
  .cabecera-pagina { padding-block: var(--e7) var(--e5); border-top: 0; }
  .cabecera-pagina h1 { font-size: var(--t-xl); max-width: 16ch; }
  @media (width < 700px) { .cabecera-pagina { padding-block: var(--e5) var(--e4); } }
}

@layer componentes {
  /* El resumen empuja al botón hacia abajo para que los cuatro botones queden a la
     misma altura aunque los textos tengan largos distintos. */
  .plan-resumen { font-size: var(--t-sm); color: var(--tenue); line-height: 1.5; flex: 1; }
  .plan-precio small { display: block; }
}

@layer componentes {
  /* En las páginas interiores la cabecera es más baja, así que el radar queda
     proporcionalmente enorme. Se achica y se sube para que siga siendo textura. */
  .cabecera-pagina .fondo-radar { right: -26%; top: -72%; width: min(70vw, 780px); opacity: .26; }
  .cabecera-pagina .fondo-marca { display: none; }
}

@layer componentes {
  .directo { margin-top: var(--e5); display: grid; gap: 5px; }
  .directo p:not(.rotulo) { font-size: var(--t-sm); }
  .directo a { color: var(--tenue); text-decoration: none; }
  .directo a:hover { color: var(--hueso-2); }
  .directo .rotulo { margin-bottom: 5px; }
}

@layer componentes {
  .plan-nota {
    font-size: var(--t-xs); line-height: 1.55; color: var(--tenue);
    padding-top: var(--e2); border-top: 1px solid var(--tinta-3);
  }
  /* El detalle de volumen del plan alto: es información que cambia la decisión de
     compra, no letra chica. Va destacado, no escondido al pie. */
  .detalle-plan {
    border: 1px solid var(--tinta-3); border-radius: 10px;
    background: var(--tinta-2); padding: var(--e3);
    display: grid; gap: var(--e2);
  }
  .detalle-plan dl { display: grid; gap: var(--e2); margin: 0; }
  .detalle-plan dt { font-family: var(--f-reloj); font-size: var(--t-xs); letter-spacing: .10em; text-transform: uppercase; color: var(--tenue); margin-bottom: 4px; }
  .detalle-plan dd { margin: 0; font-size: var(--t-sm); color: var(--hueso); }
  @media (width >= 720px) { .detalle-plan dl { grid-template-columns: repeat(3, 1fr); gap: var(--e3); } }
}

@layer componentes {
  /* El resumen y la lista se peleaban el espacio sobrante, así que cada tarjeta
     empezaba su lista a una altura distinta. Ahora el que estira es el botón: queda
     anclado abajo y las tarjetas se alinean solas, tengan el texto que tengan. */
  .plan-resumen { flex: none; }
  .plan > .btn { margin-top: auto; }
}