/* DECK DE VENTA · LA VERSION WEB DE LAS LAMINAS DE BOLIVAR COMPRA BOLIVAR (11 de agosto de 2026).
   David 2026-08-13: "monta el deck igual o mejor de como la diapositiva que use en bolivar bolivar".

   COMO SE CONSIGUE EL "IGUAL", QUE ES LA PARTE DIFICIL.
   Las laminas originales se disenaron sobre un lienzo FIJO de 1600x900 y todas sus medidas son
   pixeles de ese lienzo. Aqui la lamina mantiene su 16:9 y toda medida interior se expresa en
   `--px`, que vale un pixel de aquel lienzo y escala con la lamina. A 1600 de ancho la lamina cae
   pixel por pixel donde caia en el PDF; a cualquier otro ancho escala entera sin que una sola
   proporcion se mueva.

   POR QUE --px, Y LA TRAMPA QUE ME COSTO DOS INTENTOS.
   La conversion obvia es dividir cada pixel por 16 y escribirlo en `em`. Funciona solo mientras el
   elemento herede el cuerpo de la lamina. En cuanto un elemento declara su PROPIO font-size, sus
   margenes pasan a medirse en SUS em: el h1 de "El problema" declara 44px y su `margin-top:110px`
   escrito como 6.875em daba 302px. La lamina desbordo y el remate de las doce variables quedo
   cortado EN SILENCIO, porque la clase lleva overflow:hidden.
   EL SEGUNDO INTENTO FALLO IGUAL, y por eso queda escrito aqui: pase la unidad a una propiedad
   personalizada, `--u:1em` en la lamina, creyendo que se congelaba ahi. NO SE CONGELA. Una
   propiedad personalizada sin registrar hereda el TOKEN, no el valor, y ese `1em` se vuelve a
   resolver en cada hijo contra el font-size del hijo. Mismo bug, otra puerta.
   La cura es que la unidad no dependa del tamano de letra de NADIE: `--u` se define en `cqw`, que
   mide el contenedor. Asi vale lo mismo dentro de un h1 de 44 que dentro de un pie de 17.
   Por eso los numeros de esta hoja son LOS DEL LIENZO ORIGINAL, sin dividir. Se pueden comparar de
   frente contra `_deck-venta.mjs`, que es como se audita que la web dice lo mismo que la sala.
   El font-size si va en `em`, y ahi es correcto: se calcula contra el padre, que es lo que se
   quiere. Ver [[centrar-texto-no-centra-su-caja]]: leer el CSS no basta, hay que medir la caja.
   `qa-deck.mjs` mide el desborde de cada lamina justo por esto.

   Y DONDE ESTA EL "MEJOR": EL TELEFONO.
   Un PDF de 16:9 en un telefono de 390px deja el cuerpo de texto en 6px. Ilegible. Por debajo de
   820px esta hoja abandona el 16:9, suelta el alto, pasa las rejillas a una columna y saca de
   posicion absoluta todo lo que colgaba de una esquina del lienzo. Es el MISMO marcado: no hay una
   version movil aparte que mantener, que es como se desincronizan los idiomas.
   Ver [[copia-inline-desincroniza-los-idiomas]]. */

:root{
  --oro:#c7a24a; --oro2:#e3c873; --papel:#f7f1e7; --negro:#0b0a08;
  --fieltro:#0b3a27; --fieltro2:#062318; --verde:#1a4634;
}

/* EL CANVAS RAIZ NO HEREDA EL FONDO DEL BODY: sin `html{background}` asoma una franja blanca al
   hacer scroll elastico en iOS o al alejar el zoom, y ningun arnes de viewport fijo lo caza.
   Esta hoja solo la cargan las dos paginas del deck, asi que pintar `html` aqui no toca el sitio. */
html{background:var(--negro)}
.dk-body{margin:0;background:var(--negro);color:var(--papel);
  font-family:'EB Garamond',Georgia,serif;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}

/* ── EL RETORNO AL SITIO ──────────────────────────────────────────────────────────────────────
   Una presentacion a pantalla completa sin salida es una trampa. Va flotante y discreta, y se
   aparta sola cuando el visitante baja de la portada (lo hace deck.js). */
.dk-volver{position:fixed;top:14px;left:16px;z-index:20;text-decoration:none;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,241,231,.62);
  background:rgba(11,10,8,.62);border:1px solid rgba(199,162,74,.3);border-radius:999px;
  padding:7px 15px;backdrop-filter:blur(6px);transition:opacity .3s,color .2s,border-color .2s}
.dk-volver:hover,.dk-volver:focus-visible{color:var(--oro2);border-color:rgba(199,162,74,.7)}
.dk-volver.dk-oculta{opacity:0;pointer-events:none}

/* ── LA LAMINA ────────────────────────────────────────────────────────────────────────────────
   POR QUE cqw Y NO vw: `1vw` incluye el ancho de la barra de scroll en varios navegadores, asi que
   a 1400 de viewport con barra la lamina mide 1385 y la tipografia calcula sobre 1400. Ese 1% de
   desfase, en una lamina de texto apretado, es una linea de mas. `1cqw` es el 1% del contenedor de
   verdad. El tope de 16px congela la escala pasados los 1600 para que en un monitor grande la
   lamina no crezca hasta perder el aire del diseno original. */
.dk-deck{max-width:1600px;margin-inline:auto;container-type:inline-size}
.dk{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
    background:var(--negro);color:var(--papel);
    font-size:min(1vw,16px);            /* respaldo si el navegador no soporta container queries */
    --u:min(1vw,16px); --px:calc(var(--u)/16);
    padding:calc(var(--px)*74) calc(var(--px)*88)}
@container (min-width:1px){ .dk{font-size:min(1cqw,16px); --u:min(1cqw,16px)} }
.dk--cliente{background:var(--fieltro2)}
.dk--verde{background:var(--verde)}

/* MARCO: el filete de la casa. Oro como filete, jamas como campo. */
.dk--marco::after{content:"";position:absolute;inset:calc(var(--px)*36);
  border:1px solid rgba(199,162,74,.26);border-radius:4px;pointer-events:none;z-index:2}

/* Cabecera de lamina. En el PDF el sello y el eyebrow colgaban por separado de la esquina; aqui
   van en un solo bloque porque en el telefono tienen que fluir juntos con el resto. */
.dk__head{position:absolute;top:calc(var(--px)*74);left:calc(var(--px)*88);z-index:3;
  display:flex;align-items:center;gap:calc(var(--px)*30)}
.dk__sello{width:calc(var(--px)*76);height:calc(var(--px)*76);border-radius:50%;
  border:1px solid var(--oro);display:grid;place-items:center;
  font-family:'Playfair Display',serif;font-size:1.1875em;color:var(--oro2);flex:0 0 auto}
.dk__eyebrow{font-size:.9375em;letter-spacing:.34em;text-transform:uppercase;
  color:var(--oro2);font-weight:500}

.dk__h1{font-family:'Playfair Display',serif;font-weight:600;font-size:3.5em;line-height:1.15;
  margin:calc(var(--px)*126) 0 0;letter-spacing:-.01em;max-width:calc(var(--px)*1220)}
.dk__cuerpo{font-size:1.625em;line-height:1.5;margin:calc(var(--px)*28) 0 0;
  max-width:calc(var(--px)*960);color:rgba(247,241,231,.92)}

/* El pie va al .74 de opacidad y no menos: medido, el deslinde legal daba 4,8:1 de contraste
   cuando el resto del deck esta en 15:1. Es la unica frase que protege a David de una pregunta de
   recursos humanos y era la mas dificil de leer de la presentacion. Sigue siendo letra chica. */
.dk__pie{position:absolute;left:calc(var(--px)*88);bottom:calc(var(--px)*52);
  right:calc(var(--px)*300);margin:0;font-size:1.0625em;font-style:italic;
  color:rgba(247,241,231,.74);letter-spacing:.02em;z-index:3}
.dk__firma{position:absolute;right:calc(var(--px)*88);bottom:calc(var(--px)*50);
  width:calc(var(--px)*158);opacity:.88;z-index:3}

/* FOTO A SANGRE. Siempre object-fit:cover y nunca width+height forzados a la vez: una foto
   estirada en un deck de venta se ve antes que cualquier argumento. */
.dk__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dk__velo{position:absolute;inset:0;display:block}
/* display:flow-root no es adorno. Sin el, el margen superior del h1 (126 del lienzo) COLAPSA hacia
   afuera y empuja la caja entera hacia abajo. */
.dk__sobre{position:relative;height:100%;z-index:3;display:flow-root}
.dk__sobre--centro{display:flex;flex-direction:column;justify-content:center}
.dk__centrado{height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:0 calc(var(--px)*60);position:relative;z-index:3}

.dk-oro{color:var(--oro2);font-style:normal}
.dk-oro-suave{color:rgba(227,200,115,.86)}
.dk-a{color:var(--oro2);text-decoration-color:rgba(199,162,74,.45);text-underline-offset:.18em}
.dk-a:hover{text-decoration-color:var(--oro2)}

/* ── TARJETAS ─────────────────────────────────────────────────────────────────────────────── */
.dk__card{background:linear-gradient(160deg,var(--fieltro),var(--fieltro2));
  border:1px solid rgba(199,162,74,.28);border-radius:calc(var(--px)*14);
  padding:calc(var(--px)*18) calc(var(--px)*20)}
.dk--verde .dk__card{background:linear-gradient(160deg,rgba(0,0,0,.20),rgba(0,0,0,.34))}
.dk__card h3{font-family:'EB Garamond',serif;font-weight:500;font-size:1.375em;
  color:var(--oro2);margin:0 0 calc(var(--px)*6)}
.dk__card-p{font-size:1.1875em;line-height:1.34;color:rgba(247,241,231,.9);margin:0}

.dk__g{display:grid}
.dk__g--2{grid-template-columns:1fr 1fr;gap:calc(var(--px)*16);margin-top:calc(var(--px)*24)}

/* ══ 2 · LO QUE HACEMOS ═══════════════════════════════════════════════════════════════════════ */
.dk__foto--wow{filter:brightness(.56) saturate(.80) contrast(1.05);object-position:62% 52%}
.dk__velo--wow{background:linear-gradient(100deg,rgba(6,35,24,.95) 0%,rgba(6,35,24,.88) 46%,rgba(6,35,24,.46) 74%,rgba(4,22,14,.72) 100%)}
/* La pared blanca del estudio asoma arriba a la derecha y se lleva la mirada. */
.dk__velo--wow2{background:radial-gradient(40% 44% at 97% 1%,rgba(6,35,24,.94) 0%,rgba(6,35,24,.58) 46%,rgba(6,35,24,0) 78%)}
.dk__label{margin:0;font-size:1.125em;letter-spacing:.26em;text-transform:uppercase;color:rgba(227,200,115,.72)}
.dk__gran{font-family:'Playfair Display',serif;font-weight:600;font-size:3.75em;line-height:1.14;
  letter-spacing:-.005em;max-width:20ch;color:var(--papel);margin:calc(var(--px)*28) 0 0}
.dk__gran--oro{color:var(--oro2);max-width:22ch;margin-top:calc(var(--px)*22)}
.dk__filete{margin-top:calc(var(--px)*40);display:flex;align-items:stretch;
  gap:calc(var(--px)*24);max-width:calc(var(--px)*760)}
.dk__filete::before{content:"";width:2px;flex:0 0 2px;
  background:linear-gradient(180deg,rgba(227,200,115,.8),rgba(227,200,115,0))}
.dk__filete p{margin:0;font-size:1.5625em;line-height:1.5;color:rgba(247,241,231,.88)}
.dk__promesa{position:absolute;left:0;bottom:calc(var(--px)*62);margin:0;
  font-style:italic;font-size:1.5em;color:rgba(247,241,231,.60)}

/* ══ 3 · LA PREGUNTA ══════════════════════════════════════════════════════════════════════════ */
.dk__pregunta{font-family:'Playfair Display',serif;font-weight:600;font-size:3.9375em;
  line-height:1.18;max-width:calc(var(--px)*1240);letter-spacing:-.005em;margin:0}
.dk__pregunta-sub{margin:calc(var(--px)*38) 0 0;font-size:1.6875em;line-height:1.55;
  color:rgba(247,241,231,.72);max-width:calc(var(--px)*900)}

/* ══ 4 · EL PROBLEMA ══════════════════════════════════════════════════════════════════════════ */
.dk--problema{padding:calc(var(--px)*58) calc(var(--px)*88)}
.dk--problema .dk__h1{font-size:2.75em;margin-top:calc(var(--px)*110);max-width:calc(var(--px)*1300)}
.dk__g--problema{grid-template-columns:1fr 1.42fr;gap:calc(var(--px)*44);margin-top:calc(var(--px)*34)}
.dk__col-tit{margin:0;font-size:1em;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(247,241,231,.5);padding-bottom:calc(var(--px)*12);
  border-bottom:1px solid rgba(247,241,231,.16)}
.dk__col-tit--oro{color:var(--oro2);border-bottom-color:rgba(199,162,74,.4)}
.dk__lista{list-style:none;margin:calc(var(--px)*18) 0 0;padding:0;
  font-size:1.4375em;line-height:1.42;color:rgba(247,241,231,.74)}
.dk__lista li+li{margin-top:calc(var(--px)*11)}
.dk__foto-col{width:100%;height:calc(var(--px)*196);object-fit:cover;object-position:50% 46%;
  border-radius:calc(var(--px)*12);border:1px solid rgba(199,162,74,.3);
  margin-top:calc(var(--px)*24);display:block}
/* El renglon entre filas de los doce perfiles se quita a proposito: la lamina medida daba 911 de
   alto contra 900 de caja y la clase recortaba once pixeles EN SILENCIO. Los doce ya se separan
   por su propio margen. */
.dk__doce{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(var(--px)*30);
  margin-top:calc(var(--px)*18);font-size:1.3125em;line-height:1.28}
.dk__doce p{margin:0 0 calc(var(--px)*9)}
.dk__doce b{font-family:'Playfair Display',serif;font-weight:600;color:var(--oro2);display:block}
.dk__doce span{color:rgba(247,241,231,.76);font-size:.905em}
.dk__remate{margin:calc(var(--px)*14) 0 0;padding-top:calc(var(--px)*14);
  border-top:1px solid rgba(199,162,74,.28);font-size:1.4375em;line-height:1.32;
  color:var(--papel);max-width:calc(var(--px)*548)}
.dk--problema .dk__pie{bottom:calc(var(--px)*34)}

/* ══ 5 · LA PRUEBA ════════════════════════════════════════════════════════════════════════════ */
.dk--prueba{padding:calc(var(--px)*56) calc(var(--px)*88)}
.dk--prueba .dk__h1{font-size:3em;margin-top:calc(var(--px)*114)}
.dk__g--prueba{grid-template-columns:auto 1fr;gap:calc(var(--px)*36);align-items:center;
  margin-top:calc(var(--px)*38)}
.dk__shorts{display:flex;gap:calc(var(--px)*14)}
/* Cada tile muestra la banda central del thumbnail: el hq720 llega 1280x720 con el video vertical
   centrado y los costados desenfocados. La imagen ya viene recortada a 9:16 desde el conversor. */
.dk__short{position:relative;width:calc(var(--px)*148);height:calc(var(--px)*263);
  border-radius:calc(var(--px)*10);overflow:hidden;border:1px solid rgba(199,162,74,.32);
  background:#000;flex:0 0 auto;padding:0;cursor:pointer;
  transition:transform .25s,border-color .25s}
.dk__short img{width:100%;height:100%;object-fit:cover;display:block}
.dk__short:hover,.dk__short:focus-visible{transform:translateY(calc(var(--px)*-4));
  border-color:rgba(227,200,115,.8)}
.dk__short iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dk__play{position:absolute;left:50%;top:50%;width:calc(var(--px)*44);height:calc(var(--px)*44);
  margin:calc(var(--px)*-22) 0 0 calc(var(--px)*-22);border-radius:50%;
  border:1px solid rgba(247,241,231,.85);background:rgba(11,10,8,.42);pointer-events:none}
.dk__play::after{content:"";position:absolute;left:calc(var(--px)*17);top:calc(var(--px)*13);
  border-style:solid;
  border-width:calc(var(--px)*9) 0 calc(var(--px)*9) calc(var(--px)*14);
  border-color:transparent transparent transparent rgba(247,241,231,.95)}
.dk__sub-oro{font-family:'Playfair Display',serif;font-weight:600;font-size:2.1875em;
  color:var(--oro2);margin:0;line-height:1.2}
.dk__sub-oro--chico{font-size:1.75em}
.dk__g--prueba .dk__cuerpo{margin-top:calc(var(--px)*14);font-size:1.5em;max-width:calc(var(--px)*640)}
.dk__g--prueba2{grid-template-columns:1fr 1.75fr;gap:calc(var(--px)*22);margin-top:calc(var(--px)*32)}
.dk__g--prueba2 .dk__card{padding:calc(var(--px)*22) calc(var(--px)*26)}
.dk__num{font-family:'Playfair Display',serif;font-weight:600;font-size:2.625em;
  color:var(--oro2);line-height:1;margin:0}
.dk__num-pie{font-size:1.375em;color:var(--papel);margin:calc(var(--px)*6) 0 0}
.dk__g--prueba2 .dk__card-p{font-size:1.25em;line-height:1.4;margin-top:calc(var(--px)*10);
  color:rgba(247,241,231,.84)}
.dk__card--mesa{display:grid;grid-template-columns:calc(var(--px)*430) 1fr;gap:calc(var(--px)*26);
  align-items:center;padding:calc(var(--px)*18) calc(var(--px)*22)}
.dk__card--mesa img{width:100%;height:calc(var(--px)*200);object-fit:cover;object-position:50% 42%;
  border-radius:calc(var(--px)*9);border:1px solid rgba(199,162,74,.34)}

/* ══ 6 y 7 · FOTO A UN LADO, TEXTO AL OTRO ════════════════════════════════════════════════════
   Se prefiere a la foto a sangre con degradado encima cuando la foto tiene DETALLE que hay que
   ver: un velo lo bastante fuerte para sostener texto encima convierte la caja en una mancha
   verde. Aqui la foto se ve entera y el texto no compite con ella. El borde izquierdo se difumina
   para que la foto entre en el campo verde sin linea de corte. */
.dk__lado{position:absolute;top:0;right:0;height:100%;overflow:hidden;z-index:1}
.dk__lado>img{width:100%;height:100%;object-fit:cover;display:block}
.dk__lado i{position:absolute;inset:0;display:block;pointer-events:none}
.dk__difumina{background:linear-gradient(90deg,rgba(6,35,24,1) 0%,rgba(6,35,24,.73) 6.5%,rgba(6,35,24,0) 20%)}
/* Este radial apaga el renglon "20-45" impreso en la tapa: la caja dice 20-45 y Canon dice de 20
   a 60 minutos. La caja se ve entera y la contradiccion no se lee. */
.dk__difumina2{background:radial-gradient(31% 18% at 19% 25%,rgba(9,26,20,.99) 0%,rgba(9,26,20,.88) 38%,rgba(9,26,20,.42) 68%,rgba(9,26,20,0) 100%)}
.dk__difumina3{background:linear-gradient(0deg,rgba(6,35,24,.5) 0%,rgba(6,35,24,0) 26%)}
.dk__lado--caja{width:calc(var(--px)*756)}
.dk__lado--caja>img{object-position:50% 50%;filter:brightness(.95) saturate(1.05)}
.dk__lado--collage{width:calc(var(--px)*672)}
.dk__lado--collage>img{object-position:26% 52%;filter:brightness(.9) saturate(.98)}
.dk__sobre--objeto{max-width:calc(var(--px)*696)}
.dk__sobre--canal{max-width:calc(var(--px)*790)}
.dk--objeto .dk__h1,.dk--canal .dk__h1{font-size:2.875em;margin-top:calc(var(--px)*118)}
.dk--objeto .dk__cuerpo{font-size:1.375em;margin-top:calc(var(--px)*22);max-width:none}
.dk__tira{display:flex;gap:calc(var(--px)*14);margin-top:calc(var(--px)*22)}
.dk__tira img{width:calc(var(--px)*222);height:calc(var(--px)*126);object-fit:cover;
  border-radius:calc(var(--px)*9);border:1px solid rgba(199,162,74,.3)}
.dk__tira img:first-child{object-position:50% 76%}
.dk__tira img:last-child{object-position:50% 46%}
.dk__pie--objeto{bottom:calc(var(--px)*52);right:calc(var(--px)*880)}
.dk__pie--canal{right:calc(var(--px)*760)}
.dk--canal .dk__g--2{margin-top:calc(var(--px)*28)}
.dk--canal .dk__card{padding:calc(var(--px)*17) calc(var(--px)*20)}
.dk--canal .dk__card h3{font-size:1.4375em}
.dk__cita{margin:calc(var(--px)*26) 0 0;border-left:2px solid var(--oro);
  padding-left:calc(var(--px)*20);font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.5625em;line-height:1.38;color:var(--oro2)}

/* ══ 8 · EL SIGUIENTE PASO ════════════════════════════════════════════════════════════════════ */
.dk__g--paso{grid-template-columns:1.62fr 1fr;gap:calc(var(--px)*44);
  margin-top:calc(var(--px)*112);align-items:start}
.dk__gran--paso{font-size:2.5em;line-height:1.3;max-width:none;margin:0}
.dk__oferta{margin-top:calc(var(--px)*30);border:1px solid var(--oro);
  border-radius:calc(var(--px)*14);padding:calc(var(--px)*26) calc(var(--px)*30);
  background:rgba(0,0,0,.22)}
.dk__oferta-tit{font-family:'Playfair Display',serif;font-weight:600;font-size:1.8125em;
  color:var(--oro2);line-height:1.25;margin:0}
.dk__oferta-uno{margin:calc(var(--px)*14) 0 0;font-size:1.5625em;color:var(--papel)}
.dk__oferta-p{margin:calc(var(--px)*10) 0 0;font-size:1.25em;line-height:1.46;
  color:rgba(247,241,231,.88)}
.dk__oferta-p em{color:rgba(247,241,231,.72)}
.dk__oferta-cierre{margin:calc(var(--px)*16) 0 0;padding-top:calc(var(--px)*14);
  border-top:1px solid rgba(199,162,74,.35);font-size:1.5em;color:var(--oro2)}
.dk__nota{margin:calc(var(--px)*18) 0 0;font-size:1.25em;color:rgba(247,241,231,.8)}
.dk__firmante img{width:100%;height:calc(var(--px)*448);object-fit:cover;object-position:50% 22%;
  border-radius:calc(var(--px)*14);border:1px solid rgba(199,162,74,.34);display:block}
.dk__firmante-nom{font-family:'Playfair Display',serif;font-size:1.5625em;color:var(--oro2);
  margin:calc(var(--px)*14) 0 0}
.dk__firmante-rol{font-size:1.25em;color:rgba(247,241,231,.8);margin:calc(var(--px)*2) 0 0}

/* ══ 9 · EL CIERRE ════════════════════════════════════════════════════════════════════════════ */
.dk__cierre-frase{font-family:'Playfair Display',serif;font-weight:600;font-size:3.375em;
  line-height:1.3;max-width:calc(var(--px)*1330);color:var(--oro2);margin:0}
.dk__script{font-family:'Pinyon Script',cursive;color:var(--oro2);font-size:2.5em;
  margin:calc(var(--px)*34) 0 0}
.dk__cierre-logo{width:calc(var(--px)*210);margin-top:calc(var(--px)*54);opacity:.92}
.dk__contacto{margin:calc(var(--px)*22) 0 0;font-size:1.25em;letter-spacing:.06em;
  color:rgba(247,241,231,.72)}
/* LOS BOTONES NO EXISTEN EN EL PDF Y SON EL PUNTO DEL EJERCICIO: en la sala el contacto es una
   linea que el cliente copia a mano; aqui es un clic. */
.dk__acciones{display:flex;flex-wrap:wrap;gap:calc(var(--px)*12);justify-content:center;
  margin-top:calc(var(--px)*28)}
.dk__btn{display:inline-block;text-decoration:none;font-family:'EB Garamond',serif;
  font-size:1.1875em;letter-spacing:.06em;padding:.75em 1.5em;border-radius:999px;
  border:1px solid rgba(199,162,74,.55);color:var(--oro2);background:rgba(0,0,0,.28);
  transition:background .22s,border-color .22s,color .22s}
.dk__btn:hover,.dk__btn:focus-visible{border-color:var(--oro2);background:rgba(199,162,74,.14)}
.dk__btn--oro{background:var(--oro);border-color:var(--oro);color:#12100b;font-weight:500}
.dk__btn--oro:hover,.dk__btn--oro:focus-visible{background:var(--oro2);border-color:var(--oro2);color:#12100b}

/* ── FOCO VISIBLE. Un deck se recorre con teclado mas de lo que parece. ───────────────────── */
.dk-body :focus-visible{outline:2px solid var(--oro2);outline-offset:3px}

/* ── ENTRADA DE LAMINA. Una sola idea de movimiento, y se apaga con reduce-motion. ────────── */
@media (prefers-reduced-motion:no-preference){
  .dk[data-anim="0"]{opacity:0;transform:translateY(14px)}
  .dk{transition:opacity .55s ease,transform .55s ease}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   EL TELEFONO Y LA TABLETA VERTICAL. Aqui la lamina deja de ser lamina.
   `--px` se reasigna a 1/16 del nuevo cuerpo, asi que TODA la hoja de arriba se reescala sola y
   solo hay que corregir lo que cambia de naturaleza: la relacion de aspecto, las rejillas y lo
   que colgaba de una esquina.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .dk{aspect-ratio:auto;height:auto;min-height:auto;
      /* El piso de 11.5 no es estetico: con 10.5 el cuerpo de las tarjetas caia en 14,6px y el
         arnes lo canto. Un deck de venta que se lee entornando los ojos no se lee. */
      font-size:clamp(11.5px,3.15vw,14px); --u:clamp(11.5px,3.15vw,14px);
      padding:calc(var(--px)*42) calc(var(--px)*30) calc(var(--px)*52);
      display:flex;flex-direction:column;justify-content:flex-start}
  .dk--portada{padding:0;display:block}
  .dk--portada .dk__foto{position:static;height:auto;aspect-ratio:16/9}

  /* Todo lo que colgaba de una esquina del lienzo pasa a fluir. */
  .dk__head{position:static;margin-bottom:calc(var(--px)*26)}
  .dk__sobre,.dk__centrado{height:auto;display:block;padding:0}
  .dk__sobre--centro{display:block}
  .dk__centrado{text-align:left;align-items:stretch}
  .dk__h1,.dk--problema .dk__h1,.dk--prueba .dk__h1,.dk--objeto .dk__h1,.dk--canal .dk__h1{
    margin-top:0;font-size:2.5em;max-width:none}
  .dk__pie,.dk__pie--objeto,.dk__pie--canal{position:static;right:auto;left:auto;bottom:auto;
    margin-top:calc(var(--px)*28);font-size:1.05em}
  .dk__promesa{position:static;margin-top:calc(var(--px)*28)}
  .dk__firma{position:static;width:calc(var(--px)*128);margin-top:calc(var(--px)*34);
    align-self:flex-start}

  /* La foto a sangre deja de ser fondo y pasa a ser una imagen del articulo: detras de un texto
     que ahora mide el triple de alto, la misma foto se estira hasta volverse una mancha. */
  .dk--wow{background:var(--fieltro2)}
  .dk--wow .dk__foto{position:static;height:auto;aspect-ratio:16/10;
    margin-bottom:calc(var(--px)*28);border-radius:calc(var(--px)*11);
    filter:brightness(.72) saturate(.9)}
  .dk--wow .dk__velo{display:none}

  /* El panel lateral va primero, que es el orden en que YA esta en el marcado: no hace falta
     `order`, que descoloca cualquier cosa que se anada despues.
     Ver [[order-de-flex-descoloca-lo-que-se-anade-despues]]. */
  .dk__lado,.dk__lado--caja,.dk__lado--collage{position:static;width:100%;height:auto;
    aspect-ratio:4/3;margin-bottom:calc(var(--px)*28);border-radius:calc(var(--px)*11)}
  .dk__lado i{display:none}

  /* Una columna, salvo los doce perfiles: en dos columnas cortas se leen mejor que en una lista
     de doce renglones, y caben. */
  .dk__g--problema,.dk__g--prueba,.dk__g--prueba2,.dk__g--paso,.dk__g--2,.dk__card--mesa{
    grid-template-columns:1fr;gap:calc(var(--px)*22);margin-top:calc(var(--px)*26)}
  .dk__doce{grid-template-columns:1fr 1fr;font-size:1.15em}
  .dk__sobre--objeto,.dk__sobre--canal{max-width:none}

  .dk__gran{font-size:2.35em;max-width:none}
  .dk__gran--oro{max-width:none}
  .dk__gran--paso{font-size:1.9em}
  .dk__pregunta{font-size:2.3em;max-width:none}
  .dk__pregunta-sub{font-size:1.35em;max-width:none}
  .dk__cierre-frase{font-size:2.1em;max-width:none}
  .dk__script{font-size:2em}
  .dk__cierre-logo{width:calc(var(--px)*160);margin-top:calc(var(--px)*32)}
  .dk__filete{max-width:none}
  .dk__filete p,.dk__cuerpo,.dk--objeto .dk__cuerpo,.dk__g--prueba .dk__cuerpo{
    font-size:1.35em;max-width:none}
  .dk__lista{font-size:1.3em}
  .dk__card-p,.dk__g--prueba2 .dk__card-p,.dk__oferta-p{font-size:1.25em}
  .dk__num{font-size:2.2em}
  .dk__sub-oro{font-size:1.8em}
  .dk__remate{max-width:none;font-size:1.3em}

  .dk__shorts{gap:calc(var(--px)*11)}
  .dk__short{width:auto;height:auto;aspect-ratio:9/16;flex:1 1 0}
  .dk__card--mesa img{height:auto;aspect-ratio:16/9}
  .dk__firmante img{height:auto;aspect-ratio:4/5}
  .dk__tira img{width:calc((100% - var(--px)*14)/2);height:auto;aspect-ratio:16/10}
  .dk__foto-col{height:auto;aspect-ratio:16/9}
  .dk__acciones{justify-content:flex-start}
  .dk__btn{font-size:1.2em}
  .dk__contacto{font-size:1.15em}
  .dk--marco::after{inset:calc(var(--px)*14)}
  .dk-volver{font-size:11px;padding:6px 12px}
}

/* La tableta horizontal y el portatil chico conservan la lamina, pero el filete de 36 del lienzo
   se come demasiado aire cuando la lamina baja de 900 de ancho. */
@media (min-width:821px) and (max-width:1100px){
  .dk--marco::after{inset:calc(var(--px)*26)}
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   EL BARRIDO DORADO. Portado del home tal cual (David 2026-08-30: "recuerda el efecto
   dorado cambiante en la web en las palabras en dorado"). El deck no lo tenia: cero
   coincidencias de foil o barrido en esta hoja, mientras el sitio lo lleva sobre cada
   enfasis desde hace meses. Un deck que se proyecta al lado de la web no puede tener el
   oro quieto cuando el de la web se mueve.

   Las siete paradas del degradado no son decoracion: el blanco casi puro del 50% es el
   punto de luz que viaja, y sin las dos paradas de sombra a los lados el barrido se ve
   como un parpadeo en vez de como un reflejo sobre metal.
   ══════════════════════════════════════════════════════════════════════════════════════ */
@keyframes dk-barrido{0%{background-position:180% 0}100%{background-position:-80% 0}}

.dk .foil,.dk__h1 em,.dk__cifra{
  background:linear-gradient(100deg,#8f6d2c 0%,#c7a24a 26%,#fbeab0 45%,#fff8dd 50%,
    #fbeab0 55%,#c7a24a 74%,#8f6d2c 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:dk-barrido 6.5s linear infinite}

/* La guarda que el deck no tenia. Una animacion infinita proyectada en una sala es
   exactamente el caso que la norma contempla. */
@media(prefers-reduced-motion:reduce){
  .dk .foil,.dk__h1 em,.dk__cifra{animation:none;
    -webkit-text-fill-color:#e3c873;color:#e3c873}}

/* La rejilla del catalogo: cinco productos sin que ninguno grite mas que otro */
.dk__cat{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:14px;margin-top:18px}
.dk__cat-i{border:1px solid rgba(227,200,115,.24);border-radius:12px;
  padding:16px 16px 15px;background:rgba(0,0,0,.22)}
.dk__cat-i .q{display:block;font-family:'EB Garamond',Georgia,serif;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(247,241,231,.6);margin-bottom:7px}
.dk__cat-i .n{font-family:'Playfair Display',serif;font-size:15.5px;line-height:1.25;
  color:#f7f1e7;display:block;margin-bottom:9px}
.dk__cat-i .p{font-family:'EB Garamond',Georgia,serif;font-size:20px;color:#e3c873}
.dk__cat-i .p small{font-size:11.5px;letter-spacing:.06em;color:rgba(247,241,231,.62);
  display:block;margin-top:3px;font-variant:normal}