/* ══════════════════════════════════════════════════════════════════════════
   marka — PORTADA PUBLICADA «Un Clic» (2026-11-04). Hoja de estilos de index.html.

   Dos láminas, como en «Dos Láminas», copy sobrio y titular reducido. Tercera
   ronda: el botón de la demostración cuelga del borde inferior de la lámina
   A1 07/07 (parpadeo suave + spinner + estados dentro del propio botón), y el
   sello FIRMADO recupera su borde doble y recto en bermellón. El bermellón es
   **exclusivo del sello**: es la única señal de «ya firmado» en todo el sitio.
   Cuarta ronda: la demo queda exenta de `prefers-reduced-motion` (las vistas
   previas lo activan por defecto y apagaban pulso y spinner), el botón pasa a
   papel claro con tinta oscura para no perderse sobre el azul noche, y el QR
   del sello es un glifo rectilíneo en bermellón (`assets/qr-codigo.svg`).

   Quinta ronda: UNA sola escala de composición. `lamina__cuerpo` y `plano` son
   contenedores (`container-type: inline-size`): el tipo de la izquierda y las
   piezas del plano se miden en `cqw`, de modo que crecen y se DETIENEN juntos
   al llegar al ancho máximo de 1360px. Antes el titular se clavaba en 38px
   mientras el plano seguía hasta 940px en 1920px de pantalla. En apilado el
   plano se limita a `clamp(300px, 62cqw, 580px)` y se centra: en 900–1060px
   era una lámina de 725px bajo un bloque de texto corto. Todas las medidas en
   cqw llevan su equivalente en px delante como respaldo para navegadores
   antiguos. La cabecera gana los enlaces a Licencia y Guía.

   Séptima ronda: la cabecera sale de esta hoja y pasa a `cabecera.css`, que
   comparten las cuatro páginas. Aquí ya no hay `.encabezado` ni `.marca`.

   Independiente de styles.css y de lamina.css (que pertenecen a versiones
   anteriores y no se tocan). Sin build, sin librerías, sin peticiones externas.
   ══════════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, lamina, simulacion, cartela, responsive;

/* ── Reset ──────────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  /* Ojo: las vistas previas y Chrome headless informan `reduce` POR DEFECTO.
     Si aqui se apagaran todas las animaciones, el pulso del boton y el spinner
     no se verian nunca en una revision. Por eso la demo queda exenta: su
     movimiento es la unica pista de que el boton es interactivo y el giro es
     la unica señal de progreso. Bajo `reduce` se ralentiza, no se detiene. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
    *:not(.demo):not(.demo__giro) { animation: none !important; }
  }
}

/* ── Tokens: azul de copia de plano, papel, tinta y un unico bermellon ───── */
@layer tokens {
  :root {
    --noche:      #0E263C;
    --noche-2:    #0A1C2E;
    --azul:       #25567F;
    --claro-azul: #A8C8E0;
    /* Unico tono calido del sitio: SOLO se usa en el sello FIRMADO. */
    --sello:      #C4442C;
    --papel:      #F5F2EA;
    --papel-2:    #EDE9DE;
    --hoja:       #FCFAF4;
    --linea:      #D8D2C4;
    --tinta:      #171E1C;
    --texto:      #4A554E;
    --apagado:    #79847C;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans:  "Archivo", "Segoe UI", system-ui, sans-serif;
    --mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace;
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
@layer base {
  body {
    background: var(--noche);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .saltar {
    position: absolute; z-index: 20; top: 8px; left: 8px;
    padding: 10px 16px; background: var(--hoja); color: var(--tinta);
    font-size: 14px; text-decoration: none; transform: translateY(-160%);
  }
  .saltar:focus { transform: none; }
  :focus-visible { outline: 2px solid var(--claro-azul); outline-offset: 3px; }
  .lamina--cartela :focus-visible { outline-color: var(--azul); }

  .rotulo {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    letter-spacing: .15em; text-transform: uppercase;
  }
  .rotulo--claro { color: rgba(245, 242, 234, .62); }
  .punto {
    display: inline-block; width: 6px; height: 6px; margin-right: 9px;
    border-radius: 50%; background: var(--claro-azul); vertical-align: 2px;
  }
  .icono {
    width: 17px; height: 17px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 11px;
    padding: 14px 22px; border: 1px solid transparent;
    font-size: 14px; font-weight: 600; letter-spacing: .01em;
    text-decoration: none; cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
  }
  .boton:hover { transform: translateY(-2px); }
  .boton:disabled { opacity: .55; cursor: default; transform: none; }
  .boton--papel { background: var(--hoja); color: var(--noche); }
  .boton--papel:hover { background: #FFFFFF; }
  .boton--claro {
    background: transparent; border-color: rgba(245, 242, 234, .38);
    color: var(--hoja);
  }
  .boton--claro:hover:not(:disabled) {
    border-color: var(--hoja); background: rgba(245, 242, 234, .07);
  }
  .boton--tinta { background: var(--tinta); color: var(--hoja); }
  .boton--tinta:hover { background: var(--azul); }
  /* Segundo nivel de la cartela: instalar sin comprar sigue siendo posible,
     pero no compite con «Comprar». Solo borde, sin relleno. */
  .boton--secundario {
    background: transparent; border-color: var(--tinta); color: var(--tinta);
    font-size: 13px; font-weight: 500; padding: 12px 18px;
  }
  .boton--secundario:hover { background: var(--papel); }
  .enlace {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 14px; text-decoration: none; text-underline-offset: 4px;
  }
  .enlace:hover { text-decoration: underline; }
  .enlace--claro { color: rgba(245, 242, 234, .8); }
}

/* ── A-01 · La mesa de trabajo (se conserva diseño y posición del plano) ─── */
@layer lamina {
  .lamina--portada {
    position: relative; isolation: isolate;
    overflow-x: clip;
    min-height: 100svh;
    display: grid; grid-template-rows: auto 1fr auto;
    padding: 0 clamp(20px, 4vw, 64px);
    color: var(--hoja);
    background:
      radial-gradient(120% 90% at 78% 22%, rgba(37, 86, 127, .55), transparent 62%),
      linear-gradient(160deg, #12304A 0%, var(--noche) 48%, var(--noche-2) 100%);
  }
  .lamina__rejilla {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(rgba(168, 200, 224, .085) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168, 200, 224, .085) 1px, transparent 1px),
      linear-gradient(rgba(168, 200, 224, .035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168, 200, 224, .035) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .25) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .25) 100%);
  }

  /* Septima ronda: la cabecera ya NO vive aqui. Las cuatro paginas comparten
     `cabecera.css` (logo, enlaces, vuelta a la portada y boton de compra con
     una sola geometria). Tenerla duplicada en tres hojas fue exactamente lo
     que hizo que las barras dejaran de coincidir. */

  /* Quinta ronda: el cuerpo es el contenedor de TODA la composición. Al estar
     limitado a 1360px, el tipo de la izquierda y el plano de la derecha dejan
     de crecer al mismo tiempo; ya no hay un plano de 940px frente a un
     titular congelado en 38px. `cqw` en los descendientes = 1% de este ancho. */
  .lamina__cuerpo {
    container-type: inline-size;
    width: 100%; max-width: 1360px; margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 28px; gap: clamp(28px, 4.6cqw, 72px); align-items: center;
    padding: clamp(28px, 4vh, 60px) 0;
    font-size: 15px; font-size: clamp(13px, 1.1cqw, 15px);
  }
  .lamina__texto { min-width: 0; }
  .lamina__texto .rotulo { font-size: 10.5px; font-size: clamp(10px, .82cqw, 12px); }
  /* Titular sobrio: sin display gigante, sin itálica, sin acento de color. */
  .lamina__texto h1 {
    margin-top: 22px; margin-top: clamp(18px, 1.8cqw, 24px);
    font-family: var(--sans); font-weight: 500;
    font-size: 38px; font-size: clamp(27px, 2.9cqw, 41px); line-height: 1.24;
    letter-spacing: -.018em; color: var(--hoja);
  }
  .lamina__texto h1 em {
    display: block; font-weight: 400; font-style: normal;
    color: rgba(252, 250, 244, .68);
  }
  .bajada {
    max-width: 46ch; margin-top: 20px;
    font-size: 17px; font-size: clamp(15px, 1.25cqw, 17.5px); line-height: 1.58;
    color: rgba(245, 242, 234, .76);
  }
  .acciones {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 18px 24px; gap: 14px clamp(14px, 1.8cqw, 24px);
    margin-top: 28px; margin-top: clamp(22px, 2.2cqw, 30px);
  }
  .acciones .boton { font-size: 14px; font-size: clamp(13px, 1.05cqw, 15px); }
  .micro {
    margin-top: 26px; font-family: var(--mono); font-size: 11px;
    font-size: clamp(10px, .82cqw, 12px);
    letter-spacing: .06em; color: rgba(245, 242, 234, .44);
  }

  .plano {
    /* Contenedor propio: sello, cartela, marco y botón se miden contra el ancho
       REAL de la lámina. En móvil el plano se reduce completo, no conserva
       piezas de tamaño fijo que se vuelven desproporcionadas.
       El margen inferior deja sitio al botón que cuelga del borde. */
    container-type: inline-size;
    position: relative; min-width: 0;
    margin: 0 0 58px; margin: 0 0 clamp(46px, 4.4vw, 60px);
    padding: 12px; padding: clamp(6px, 1.5cqw, 12px);
    background: var(--hoja);
    border: 1px solid rgba(168, 200, 224, .45);
    box-shadow: 0 32px 70px rgba(0, 0, 0, .38), 0 2px 0 rgba(0, 0, 0, .2);
    transform: rotate(-.55deg);
  }
  .plano::before, .plano::after {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background: rgba(222, 231, 238, .55); border: 1px solid rgba(168, 200, 224, .3);
  }
  .plano::before { transform: translate(9px, 9px) rotate(.7deg); }
  .plano::after  { transform: translate(18px, 18px) rotate(1.3deg); background: rgba(200, 215, 228, .35); }
  .plano img { width: 100%; height: auto; }
  .plano__esquina {
    position: absolute; top: -12px; top: clamp(-12px, -1.6cqw, -8px);
    left: 22px; left: clamp(12px, 3.2cqw, 22px);
    padding: 3px 9px; background: var(--noche); color: var(--hoja);
    font-family: var(--mono); font-size: 10px; font-size: clamp(8px, 1.35cqw, 10px);
    letter-spacing: .12em;
  }
  /* Réplica del marcador arrastrable de la app: celda izquierda con el icono
     qr-scan, separador vertical y el texto a la derecha (signature.py:265-302).
     Borde doble y esquinas rectas, como en «Dos Láminas»; el bermellón vuelve
     solo aqui para señalar que el juego ya está firmado. */
  .plano__sello {
    position: absolute; right: 6%; bottom: 17%;
    display: grid; grid-template-columns: 30% minmax(0, 1fr);
    align-items: stretch; overflow: hidden;
    width: 214px; width: clamp(96px, 29cqw, 214px);
    background: var(--hoja);
    border: 3px double var(--sello); border-width: clamp(2px, .45cqw, 3px);
    border-radius: 0;
    color: var(--sello); font-family: var(--mono); font-size: 8.5px;
    font-size: clamp(7px, 1.25cqw, 8.5px);
    letter-spacing: .1em; text-align: center;
    transform: rotate(-9deg) scale(1.14); opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
  }
  .plano__sello-qr {
    display: grid; place-items: center; padding: 8px; padding: clamp(5px, 1.2cqw, 8px);
    background: #FBF0EA; border-right: 1px solid rgba(196, 68, 44, .3);
  }
  .plano__sello-qr img { width: 25px; width: clamp(13px, 3.6cqw, 25px); height: auto; }
  .plano__sello-texto {
    display: grid; align-content: center; gap: 2px;
    padding: 8px 10px; padding: clamp(5px, 1.2cqw, 8px) clamp(6px, 1.5cqw, 10px);
  }
  .plano__sello-texto b {
    font-size: 14px; font-size: clamp(9px, 2cqw, 14px);
    letter-spacing: .14em; font-weight: 700;
  }
  .portada--firmada .plano__sello {
    opacity: 1; transform: rotate(-9deg) scale(1);
  }
  .plano__pie {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 10px; margin-top: clamp(6px, 1.5cqw, 10px);
    padding-top: 8px; padding-top: clamp(5px, 1.2cqw, 8px);
    border-top: 1px solid rgba(31, 78, 121, .22);
    color: var(--azul); font-family: var(--mono);
    font-size: 10px; font-size: clamp(8px, 1.35cqw, 10px);
    letter-spacing: .1em;
  }
}

/* ── Demostración: botón colgado del borde inferior de la lámina 07/07 ──── */
@layer simulacion {
  /* Papel claro con tinta oscura: el boton anterior era azul noche sobre azul
     noche y se perdia. Funciona como una etiqueta de llamada de plano. */
  .demo {
    position: absolute; left: 50%; bottom: -50px; z-index: 3;
    /* 252px es el minimo que admite la leyenda completa a 9px sin recortarla
       en tablet (antes 206px y el texto se cortaba por ambos lados). */
    width: 302px; width: clamp(252px, 44cqw, 302px); max-width: 94%;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 9px 14px; border: 1px solid var(--noche);
    border-radius: 0; background: var(--hoja); color: var(--noche);
    font-family: var(--mono); font-size: 11px; font-size: clamp(9px, 1.6cqw, 11px);
    font-weight: 500; letter-spacing: .04em;
    line-height: 1.25; white-space: nowrap; cursor: pointer;
    transform: translateX(-50%);
    box-shadow: 0 0 0 0 rgba(168, 200, 224, .6), 0 12px 26px rgba(0, 0, 0, .38);
    animation: demo-latir 1.9s ease-in-out infinite;
  }
  /* Vástago y punto: el botón queda unido al borde inferior del plano. */
  .demo::before {
    content: ""; position: absolute; left: 50%; bottom: 100%;
    width: 1px; height: 20px; background: rgba(168, 200, 224, .85);
    transform: translateX(-50%);
  }
  .demo::after {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 17px);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--hoja); transform: translateX(-50%);
  }
  .demo:hover:not(:disabled) { background: #FFFFFF; border-color: var(--azul); }
  .demo:focus-visible { outline: 2px solid var(--claro-azul); outline-offset: 3px; }
  .demo:disabled { cursor: default; opacity: 1; }
  .demo__flecha { width: 15px; height: 15px; }
  .demo__giro { display: none; }

  /* Los tres estados viven dentro del propio botón. */
  .demo--firmando, .demo--listo {
    animation: none; transform: translateX(-50%);
  }
  .demo--firmando .demo__giro {
    display: block; width: 14px; height: 14px; flex: none;
    border: 2px solid rgba(14, 38, 60, .22);
    border-top-color: var(--noche); border-radius: 50%;
    transform-origin: 50% 50%;
    animation: demo-girar .7s linear infinite;
  }
  .demo--firmando .demo__flecha, .demo--listo .demo__flecha { display: none; }
  .demo--listo { border-color: var(--azul); }

  /* Pulso legible a distancia: halo que se expande, borde que se oscurece,
     fondo que se aclara y 3 px de viaje. Sin opacidad para que el texto
     nunca parpadee ni pierda contraste. */
  @keyframes demo-latir {
    0%, 100% {
      transform: translateX(-50%) translateY(0);
      border-color: var(--claro-azul); background: var(--hoja);
      box-shadow: 0 0 0 0 rgba(168, 200, 224, .6), 0 12px 26px rgba(0, 0, 0, .38);
    }
    50% {
      transform: translateX(-50%) translateY(-3px);
      border-color: var(--noche); background: #FFFFFF;
      box-shadow: 0 0 0 11px rgba(168, 200, 224, 0), 0 12px 26px rgba(0, 0, 0, .38);
    }
  }
  /* `from` explicito: con solo `to`, algunos motores no interpolan desde
     `transform: none`. Asi el giro arranca siempre desde 0 grados. */
  @keyframes demo-girar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Bajo `reduce` NO se apaga: se ralentiza. Las vistas previas y Chrome
     headless informan `reduce` por defecto; apagar la demo aqui la dejaria
     siempre quieta durante la revision del diseno. */
  @media (prefers-reduced-motion: reduce) {
    .demo { animation-duration: 3.2s !important; }
    .demo--firmando .demo__giro { animation-duration: 1.05s !important; }
  }
}

/* ── A-02 · La cartela ──────────────────────────────────────────────────── */
@layer cartela {
  .lamina--cartela {
    padding: clamp(34px, 5.5vw, 84px) clamp(20px, 4vw, 64px) clamp(28px, 4vw, 56px);
    background: var(--papel);
  }
  .cartela {
    max-width: 1260px; margin: 0 auto;
    border: 1px solid var(--tinta); background: var(--hoja);
    box-shadow: 10px 10px 0 rgba(23, 30, 28, .08);
  }
  .cartela__barra {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 20px;
    padding: 11px 20px; background: var(--papel-2);
    border-bottom: 1px solid var(--tinta); color: var(--texto);
  }
  .cartela__cuerpo {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 1px; background: var(--tinta);
  }
  .cartela__decision, .cartela__datos { background: var(--hoja); min-width: 0; }
  .cartela__decision { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 46px); }

  .cifra {
    font-family: var(--serif); font-weight: 400; line-height: .88;
    font-size: clamp(78px, 9vw, 132px); letter-spacing: -.055em;
  }
  .cifra span { display: inline-block; font-size: .36em; vertical-align: top; margin-top: .18em; letter-spacing: 0; }
  .cifra__nota {
    margin-top: 14px; font-family: var(--mono); font-size: 11px;
    letter-spacing: .07em; color: var(--apagado); text-transform: uppercase;
  }
  /* «Comprar» es la decisión principal; instalar queda en segundo nivel y va
     acompañado de la aclaración de que sin licencia no se habilita la firma. */
  .cartela__acciones {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 14px; margin-top: 26px;
  }
  .cartela__acciones .boton { align-self: flex-start; margin-top: 0; }
  .boton--comprar { min-width: 148px; }
  .cartela__prueba {
    margin-top: 18px; max-width: 46ch;
    font-size: 13.5px; line-height: 1.55; color: var(--texto);
  }
  .cartela__prueba code {
    font-family: var(--mono); font-size: .92em; color: var(--tinta);
  }
  .condiciones {
    margin-top: 18px; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .04em; line-height: 1.7; color: var(--apagado);
  }
  .cartela__privacidad {
    margin-top: 14px; max-width: 38ch; font-size: 14px;
    line-height: 1.55; color: var(--texto);
  }

  .cartela__datos {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    gap: 1px; background: var(--linea); align-content: stretch;
  }
  .cartela__datos > div { min-width: 0; padding: 16px 20px; background: var(--hoja); }
  .cartela__datos dt {
    font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--apagado);
  }
  .cartela__datos dd { margin-top: 7px; font-size: 15px; font-weight: 600; line-height: 1.4; }
  .cartela__datos code {
    font-family: var(--mono); font-size: 11.5px; font-weight: 400;
    overflow-wrap: anywhere; color: var(--texto);
  }
  .dato--ancho { grid-column: 1 / -1; }
  .cartela__datos dd .copiar {
    margin-left: 10px; padding: 4px 9px; border: 1px solid var(--linea);
    background: transparent; font-family: var(--mono); font-size: 10px;
    letter-spacing: .06em; cursor: pointer;
  }
  .cartela__datos dd .copiar:hover:not(:disabled) { background: var(--tinta); color: var(--hoja); border-color: var(--tinta); }
  .cartela__datos dd .copiar:disabled { opacity: .4; cursor: not-allowed; }

  /* La Fig. 02 se retiró por decisión del usuario: la captura recortada
     seguía viéndose mal. La cartela pasa directo a la ficha desplegable. */
  .ficha { border-top: 1px solid var(--tinta); }
  .ficha > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 15px 20px; cursor: pointer; list-style: none;
    font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--tinta);
  }
  .ficha > summary::-webkit-details-marker { display: none; }
  .ficha > summary:hover { background: var(--papel); }
  .ficha__signo { font-size: 17px; color: var(--azul); transition: transform .2s ease; }
  .ficha[open] .ficha__signo { transform: rotate(45deg); }
  .ficha__cuerpo {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px clamp(24px, 4vw, 56px);
    padding: 18px 20px 28px; border-top: 1px solid var(--linea);
  }
  .ficha__cuerpo h3 {
    margin-bottom: 10px; font-family: var(--mono); font-size: 10px;
    letter-spacing: .13em; text-transform: uppercase; color: var(--apagado);
  }
  .ficha__cuerpo li, .ficha__cuerpo p {
    font-size: 13.5px; line-height: 1.6; color: var(--texto);
  }
  .ficha__cuerpo li + li { margin-top: 5px; }
  .ficha__cuerpo a { color: var(--azul); }

  .cartela__pie {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px 24px;
    padding: 14px 20px; border-top: 1px solid var(--tinta);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
    color: var(--apagado);
  }
  .cartela__pie nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .cartela__pie a { text-decoration: none; color: var(--tinta); }
  .cartela__pie a:hover { color: var(--azul); text-decoration: underline; }
}

/* ── Adaptaciones ───────────────────────────────────────────────────────── */
@layer responsive {
  @media (max-width: 1060px) {
    .lamina--portada { min-height: auto; }
    .lamina__cuerpo { grid-template-columns: 1fr; gap: 40px; padding: 44px 0 40px; }
    /* En apilado el titular necesita otra pendiente: el contenedor ya no es
       una columna estrecha sino todo el ancho de la composición. */
    .lamina__texto h1 { font-size: 40px; font-size: clamp(27px, 4.2cqw, 41px); }
    /* Antes: 720px fijos → una lámina de 725×545px dominando 900–1060px.
       Ahora se limita proporcionalmente al contenedor y se centra. */
    /* `width: 100%` es obligatorio: con `container-type: inline-size` el
       contenido no aporta ancho intrinseco, y unos margenes auto dejarian la
       lamina en ~27px. Se centra con justify-self, no con margenes. */
    .plano {
      width: 100%; max-width: 580px; max-width: clamp(300px, 62cqw, 580px);
      justify-self: center;
    }
    .cartela__cuerpo { grid-template-columns: 1fr; }
    .cartela__decision { border-bottom: 1px solid var(--tinta); }
    .cartela__datos { grid-template-rows: none; }
  }
  @media (max-width: 760px) {
    .ficha__cuerpo { grid-template-columns: 1fr; }
    .cartela__pie { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 520px) {
    /* Sin margen propio: se hereda el `clamp(20px, 4vw, 64px)` de la regla
       base, el mismo que usan licencia, terminos y guia. Antes aquí eran 18 px
       y la cabecera se corría 2–3 px respecto de las otras páginas. */
    .lamina--cartela { padding: 28px 18px 36px; }
    .cartela { box-shadow: 4px 4px 0 rgba(23, 30, 28, .08); }
    .lamina__texto h1 { font-size: 27px; }
    .bajada { font-size: 15px; }
    .acciones { gap: 14px; }
    .acciones .boton { width: 100%; }
    .plano { margin-bottom: 46px; }
    /* El sello ya se escala solo con cqw; solo se afina el borde y el botón. */
    .plano__sello { border-width: 2px; }
    .demo {
      font-size: 9.5px; gap: 7px; padding: 8px 10px;
      white-space: normal; text-align: center; line-height: 1.3;
    }
    .cartela__datos { grid-template-columns: 1fr; }
    .dato--ancho { grid-column: auto; }
    .cartela__decision { padding: 24px; }
    .cartela__acciones .boton { width: 100%; }
  }
}