/* ============================================================
   LA CARTA, COMO UN CROMO DE VERDAD (20-sep)

   Gonzalo: «estan feas las tarjetas, las quiero mas disenadas como mis
   ejemplos», y los ejemplos son una carta de Yahoo Sports y una de Pokemon.
   Puestas al lado de la mia la diferencia no era el adorno, era la ESTRUCTURA:

   - Las suyas son OSCURAS y el arte va a sangre, llenando la carta. La mia era
     blanca con un icono pequeno flotando en medio de un folio.
   - Las suyas tienen partes: una franja de marca arriba, el arte en el centro y
     un pie con el dato. La mia era titulo y parrafo, como un articulo.
   - El holografico se nota porque el fondo es oscuro. Sobre blanco, el mismo
     foil casi no existe.

   Asi que el arte pasa a ser el fondo, grande y a sangre; el papel se oscurece;
   y el pie recoge el dato. El troquel de arriba y abajo es el detalle que
   convierte un rectangulo en un cromo.
   ============================================================ */
.idea-card{
  --rail-boostercard-paper:#0d1426;
  color:#eaf1ff;
}
.idea-card .rail-boostercard__face{padding:0;overflow:hidden}

/* EL ARTE, A SANGRE. Deja de ser un icono en una fila y pasa a ser el fondo:
   grande, recortado por el canto, y detras del texto. */
.idea-card .rail-boostercard__art{
  position:relative;display:block;padding:74px 20px 96px;min-height:0;
}
.idea-card .rail-boostercard__art > svg:first-child{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:118%;height:auto;max-height:none;opacity:.13;
  stroke:currentColor;fill:none;pointer-events:none;
}
/* El titular manda: es lo unico que se lee de lejos. */
.idea-card .rail-boostercard__art h3{
  position:relative;margin:0 0 10px;color:#fff;text-wrap:balance;
  font:400 clamp(25px,6.4vw,31px)/1.16 Georgia,serif;
}
.idea-card .rail-boostercard__art p{
  position:relative;margin:0;color:#c3d3ee;
  font:400 clamp(15px,3.9vw,17px)/1.5 "Source Sans 3",sans-serif;
}

/* LA FRANJA DE ARRIBA, con la chapa y el numero, sobre el arte. */
.idea-card .rail-boostercard__head{
  position:absolute;left:0;right:0;top:0;z-index:2;
  padding:14px 16px 12px;background:linear-gradient(180deg,#0d1426f2,#0d142600);
}
.idea-card .rail-boostercard__rarity{
  background:#12203c;color:#dce8ff;border:1px solid var(--m-borde,#789ce1);
  font:800 11px/1.25 "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.idea-card .rail-boostercard__serial{color:#9fb5d8;font:700 12px/1 "Source Sans 3",sans-serif}

/* EL TROQUEL. Dos lineas de puntos: es lo que convierte un rectangulo en algo
   que alguien arranco de una tira. */
.idea-card .rail-boostercard__face::before,
.idea-card .rail-boostercard__face::after{
  content:'';position:absolute;left:14px;right:14px;height:0;z-index:2;
  border-top:1.5px dashed #ffffff2e;pointer-events:none;
}
.idea-card .rail-boostercard__face::before{top:54px}
.idea-card .rail-boostercard__face::after{bottom:58px}

/* EL PIE, con el tema de la carta. */
.idea-card__pie{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 16px 16px;
  background:linear-gradient(0deg,#0d1426f2,#0d142600);
  color:#a9bfe2;font:600 12px/1.45 "Source Sans 3",sans-serif;letter-spacing:.04em;
}

/* LOS DESTELLOS, CON COLOR PROPIO. El kit los pinta con currentColor, y sobre
   el oro la tinta del metal es casi negra: los siete se dibujaban y no se veia
   ninguno. Un destello oscuro sobre metal claro no es un destello. Blanco con
   halo calido, que funciona encima de los nueve metales. */
.idea-pack .rail-sparkle,.idea-card .rail-sparkle{
  /* CON TAMANO. `inset:0` no basta aqui: medido, la capa salia 0x0 y los siete
     destellos, que se colocan en PORCENTAJES de esa caja, caian amontonados en
     una esquina. Se veian en el DOM, encendidos y con su animacion, y no habia
     ni uno en pantalla. */
  /* Y ABSOLUTA. Una regla propia del sobre pone `position:relative` a sus
     spans, asi que la capa computaba relative: `inset:0` no hacia nada y la
     caja quedaba en 0 de alto. Los siete destellos existian, encendidos y con
     su animacion, amontonados en una esquina de un metro cuadrado de nada. */
  position:absolute;inset:0;width:auto;height:auto;
  --rail-sparkle-color:#ffffff;
  --rail-sparkle-bloom-color:#fff6d8;
}
.idea-card .rail-sparkle{--rail-sparkle-color:#ffd77a;--rail-sparkle-bloom-color:#fff1c2}

/* EL PAPEL DE LA CARTA SE DECLARA. La cara del kit pinta su fondo con
   var(--rail-boostercard-paper, #0b0b0c), que es OSCURO por defecto: al no
   declararlo, la carta salia casi negra con el texto invisible. Antes se veia
   blanca por el fondo propio de .idea-card, que se quito al adoptar el
   componente. Depender de un color heredado por casualidad es como no tenerlo.
   Y ojo con el nombre: en la version anterior del kit la variable se llamaba
   --rail-boostercard-bg. Declarar la vieja no da error, simplemente no hace
   nada, que es la peor forma de fallar. */
/* El papel BLANCO se retiro: la carta pasa a ser oscura, como los cromos de
   referencia. Se deja dicho porque el valor por defecto del kit tambien es
   oscuro y podria parecer que esta linea sobra: no sobra, la declara ESTA hoja
   a proposito y con su propio tono. */

/* EL FOIL, con el traje de esta marca. La lamina la pone el kit; aqui solo se
   dice cuanto brilla sobre papel claro. Los valores por defecto del kit estan
   pensados para carta oscura: sobre blanco, color-dodge al 55% quema el texto.
   Medido en pantalla, no elegido a ojo. */
.idea-card .rail-boostercard__foil{
  /* `screen` SOLO ACLARA. Probe primero soft-light, que es lo que se usa sobre
     carta oscura, y la captura salio con la carta NEGRA y el texto ilegible:
     los tramos oscuros del degradado se multiplican sobre papel claro. Un modo
     que puede oscurecer no vale encima de texto. */
  --rail-boostercard-foil-opacity:.72;
  --rail-boostercard-foil-blend:screen;
  --rail-boostercard-foil-grain:.55;
}

/* UN SOLO MARCO. El canto holografico del kit ya es el borde de la carta; el
   borde y el relleno propios lo dejaban dentro de otro marco, como una lamina
   enmarcada dos veces. Se quita el de fuera y manda el del kit. */
.idea-card.rail-boostercard{border:0;padding:0;background:none;box-shadow:0 14px 35px #0b1f3a16}
/* NOTA: este bloque quedo superado por el rediseno de cromo del final del
   fichero, que declara la chapa oscura. Se conserva el porque, que sigue
   valiendo: el metal va al borde y nunca debajo de la tinta.
   La chapa de rareza lleva el metal en el BORDE, no debajo de la tinta. Puesto
   de fondo se leia como un acierto y era la trampa de siempre: un degradado
   metalico barre del claro al oscuro y ninguna tinta aguanta todas sus paradas.
   Es la misma leccion que obligo a poner el nombre del sobre sobre una placa.
   Asi la chapa dice de que sobre viene y el par de colores del texto es uno
   solo, fijo y comprobable. */
.idea-card .rail-boostercard__rarity{
  background:#eef3fc;color:#0b1f3a;
  border:2px solid var(--m-borde,#789ce1);
}

/* LA CARA DEL KIT, SIN EL GIRO. `__face` es absoluta porque existe para una
   carta de dos caras que se da la vuelta: una encima de la otra. Usada sin
   giro, nada empuja el alto y la carta colapsaba a 4px, medido. Se devuelve al
   flujo, que es lo unico que cambia; el canto, el holografico, la chapa de
   rareza y el numero de serie siguen siendo los suyos. */
.idea-card.rail-boostercard{display:block;perspective:none}
.idea-card .rail-boostercard__box{max-width:none;width:100%;transform-style:flat}
.idea-card .rail-boostercard__face{position:relative;inset:auto;height:100%}
.idea-card .rail-boostercard__art{display:flex;flex-direction:column;align-items:center;gap:6px}

/* EL TRAJE DEL SOBRE. La estructura la pone rail-kit (.rail-pack y .rail-deck);
   aqui solo entra el color de la marca, por variables. Antes esta hoja repetia
   la estructura entera a mano, asi que ninguna otra marca podia usarla y cada
   arreglo -la placa del nombre, la ilustracion al 42%, la pastilla de abrir- se
   quedaba encerrado en este sitio. */
.idea-pack{
  --rail-pack-bg:var(--m-fondo);
  --rail-pack-ink:var(--m-tinta);
  --rail-pack-edge:var(--m-borde);
  --rail-pack-min-height:320px;
  --rail-pack-radius:6px;
  --rail-pack-shadow:0 12px 20px #0b1f3a22;
  --rail-pack-name-bg:rgba(9,15,27,.58);
  --rail-pack-hint-size:13.5px;
}
@media(max-width:600px){.idea-pack{--rail-pack-min-height:286px;--rail-pack-art-size:70px}}

.idea-packs{max-width:720px;margin:24px auto 32px;--pack-blue:#1d4ed8;--pack-ink:#0b1f3a}
.pack-stage{padding:6px 0 22px;perspective:1000px}
.idea-pack{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-height:250px;padding:26px 10px 18px;border:1px solid var(--m-borde);border-radius:6px;background:var(--m-fondo);color:var(--m-tinta);box-shadow:0 12px 20px #0b1f3a22;cursor:pointer;font:600 15px/1.2 "Source Sans 3",sans-serif;touch-action:manipulation}
.idea-pack strong{font-weight:600;text-wrap:balance}
/* Medido en el UAT: el sello salia a 9px y la pista a 10px una vez aplicada
   la escala del movil. Por debajo de 11px deja de leerse comodo. */
.idea-pack__seal{position:absolute;left:12px;top:22px;font-size:12px;letter-spacing:.1em}
.idea-pack__hint{font-size:13px;opacity:.92}
.idea-pack__art{position:absolute;inset:26% 20% 36%;border:1px solid currentColor;border-radius:50%;opacity:.7;box-shadow:inset 0 0 0 8px #ffffff15,0 0 0 10px #ffffff12}
.idea-pack__tear{position:absolute;inset:-1px -1px auto;height:22px;background:repeating-linear-gradient(90deg,#adc5ec 0 2px,#5a7ea9 2px 4px);border-radius:5px 5px 0 0;transform-origin:right center;pointer-events:none}
.pack-action{width:100%;min-height:48px;padding:12px 18px;border:1px solid var(--pack-blue);border-radius:10px;color:var(--pack-blue);background:white;font:600 16px/1.3 "Source Sans 3",sans-serif;cursor:pointer}
.idea-card{position:relative;padding:28px;border:2px solid #789ce1;border-radius:18px;background:linear-gradient(135deg,#fff,#edf3ff 60%,#fff);box-shadow:0 14px 35px #0b1f3a16;color:#0b1f3a}
.idea-card__topic{font:600 12px/1.4 "Source Sans 3",sans-serif;letter-spacing:.08em;text-transform:uppercase}.idea-card h3{font:400 clamp(25px,5vw,36px)/1.15 Georgia,serif;margin:16px 0}.idea-card p,.pack-lesson p,.pack-lesson li{font-size:16px;line-height:1.45}.idea-packs summary{cursor:pointer;padding:12px 0;min-height:44px;font-size:16px;font-weight:600;color:#1d4ed8}.pack-lesson{margin:14px 0}.pack-lesson ul{padding-left:20px}.pack-lesson li{margin-bottom:8px}.pack-controls{margin-top:14px}.idea-packs [hidden]{display:none!important}
.idea-packs button:focus-visible,.idea-packs summary:focus-visible{outline:3px solid #1d4ed8;outline-offset:5px}
@media(prefers-reduced-motion:no-preference){.idea-pack{transition:transform .25s,opacity .25s}.idea-pack:hover:not(:disabled){transform:translateY(-8px) rotate(0)}[data-state=opening] .idea-pack:not([data-picked]){opacity:.18;transform:scale(.92)}[data-state=opening] .idea-pack[data-picked]{transform:translateY(-10px) rotate(0) scale(1.05)}[data-state=opening] [data-picked] .idea-pack__tear{animation:pack-tear .8s ease-in forwards}.idea-card{animation:card-arrive .5s cubic-bezier(.2,.8,.2,1)}@keyframes pack-tear{40%{transform:translateY(-5px) rotate(-5deg)}100%{transform:translate(20px,-65px) rotate(28deg);opacity:0}}@keyframes card-arrive{from{opacity:0;transform:translateY(20px) rotateY(-15deg)}to{opacity:1;transform:none}}}
@media(max-width:600px){.pack-stage{gap:8px;padding-inline:4px}.idea-pack{min-height:190px;padding:22px 5px 16px;gap:8px;font-size:14px}.idea-pack__hint{font-size:12px}.idea-pack__seal{font-size:11px;left:8px}.idea-card{padding:22px}.idea-packs{margin-top:12px}}
.thesis-more{margin:20px auto 60px}.thesis-more>summary{min-height:48px;padding:12px 0;font-size:18px;font-weight:600;color:#1d4ed8;cursor:pointer}.thesis-more>.reading{width:100%;padding-top:20px}
.pack-takeaway{font-size:16px;line-height:1.45;margin:18px 0 8px}
.idea-subscribe{box-sizing:border-box;width:min(480px,calc(100% - 24px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);border:1px solid #b4c7e4;border-radius:20px;padding:24px;background:#fff;color:#0b1f3a;overflow-y:auto;overscroll-behavior:contain}.idea-subscribe::backdrop{background:#0b1f3aaa;backdrop-filter:blur(5px)}.idea-subscribe h2{font:400 29px/1.15 Georgia,serif;margin:12px 0}.idea-subscribe__close{display:block;margin-left:auto;border:0;background:none;color:#0b1f3a;min-height:44px;padding:8px 12px;font-size:16px;cursor:pointer}.idea-subscribe label{display:block;margin:16px 0;font-size:16px}.idea-subscribe label>input:not([type=checkbox]){display:block;box-sizing:border-box;width:100%;min-height:48px;margin-top:8px;border:1px solid #8ca3c4;border-radius:9px;padding:12px;font-size:16px;color:#0b1f3a;background:white}.idea-subscribe p{font-size:14px;line-height:1.45}.idea-subscribe .idea-subscribe__consent{display:flex;gap:10px;align-items:center;min-height:44px}.idea-subscribe__consent input{width:22px;height:22px;flex-shrink:0;accent-color:#1d4ed8}.idea-subscribe .pack-action{background:#1d4ed8;color:white;min-height:52px}.idea-subscribe__back{display:block;width:100%;min-height:44px;margin-top:8px;border:0;background:none;color:#1d4ed8;font-size:16px;cursor:pointer}.idea-subscribe [hidden]{display:none!important}.idea-subscribe :focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}.pack-subscribe{background:#1d4ed8;color:#fff;margin-bottom:10px}
@media(max-width:600px){.idea-subscribe{position:fixed;inset:auto 0 0;margin:0;width:100%;max-height:90vh;max-height:90dvh;border-radius:22px 22px 0 0;padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px))}}

/* One revealed card contains the idea, explanations and next actions. */
.idea-packs[data-state=revealed]{box-sizing:border-box;padding:26px;border:2px solid #789ce1;border-radius:18px;background:linear-gradient(135deg,#fff,#f1f5ff 65%,#fff);box-shadow:0 14px 35px #0b1f3a16;color:#0b1f3a}
.idea-packs[data-state=revealed] .idea-card{padding:0;border:0;border-radius:0;background:none;box-shadow:none;animation:none}
.idea-packs[data-state=revealed] .pack-takeaway{font-size:14px;color:#526782;margin:16px 0 18px}
.idea-packs[data-state=revealed] .pack-lesson{margin:0;padding:0;border:0;border-top:1px solid #ccdaee;border-radius:0;background:transparent}
.idea-packs[data-state=revealed] .pack-lesson>summary{padding:14px 4px;min-height:48px;box-sizing:border-box;font-size:15px}
.idea-packs[data-state=revealed] .pack-lesson>p,.idea-packs[data-state=revealed] .pack-lesson>ul{margin:0 4px 16px}
.idea-packs[data-state=revealed] .pack-controls{margin-top:18px;padding-top:18px;border-top:1px solid #ccdaee}
.idea-packs[data-state=revealed] summary:focus-visible{outline-offset:-2px;border-radius:5px}
@media(max-width:600px){.idea-packs[data-state=revealed]{padding:20px 16px}.idea-packs[data-state=revealed] .idea-card h3{font-size:27px}}

/* A small working interface makes each thesis tangible. */
.idea-demo{margin:22px 0 8px;text-align:left}
.idea-demo .idea-demo__label{font:600 11px/1.4 "Source Sans 3",sans-serif;letter-spacing:.09em;color:#526782;margin:0 0 10px}
.idea-demo__screen{overflow:hidden;padding:20px;border:1px solid #b8ccee;border-top:4px solid #1d4ed8;border-radius:12px;background:#fff;box-shadow:0 8px 24px #0b1f3a0d}
.idea-demo__title{display:block;font:600 18px/1.3 "Source Sans 3",sans-serif}
.idea-demo .idea-demo__context{font-size:15px;margin:8px 0 16px;color:#526782}
.idea-demo__action,.idea-demo__reset{box-sizing:border-box;min-height:48px;width:100%;border:1px solid #1d4ed8;border-radius:8px;padding:12px;font:600 16px/1.3 "Source Sans 3",sans-serif;cursor:pointer;touch-action:manipulation;background:#1d4ed8;color:#fff}
.idea-demo__reset{background:white;color:#1d4ed8;margin-top:12px}
.idea-demo__status:empty{display:none}
.idea-demo__status{padding:14px;border-radius:8px;background:#edf3ff;color:#0b1f3a;border-left:3px solid #1d4ed8}
.idea-demo__status strong{font-size:17px}.idea-demo__status p{font-size:14px;line-height:1.45;margin:8px 0 0}
@media(prefers-reduced-motion:no-preference){.idea-demo__screen[data-done] .idea-demo__status{animation:idea-feedback .32s ease-out}@keyframes idea-feedback{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
@media(max-width:400px){.idea-demo__screen{padding:16px}}

/* Reveal one idea and its demo; deeper reading is optional. */
.idea-packs[data-state=revealed] .pack-controls{display:flex;gap:12px;margin-top:12px;padding-top:8px}
.idea-packs .pack-link{width:auto;flex:1;border:0;background:transparent;font-size:14px;padding:8px 4px;min-height:44px}
.idea-packs[data-state=revealed] .idea-demo{margin-top:16px}
.idea-packs[data-state=revealed] .idea-card__topic{font-size:11px;margin-top:0}
.pack-reading{max-width:520px;border-radius:18px 18px 0 0}
.pack-reading h2{font:400 clamp(25px,6vw,31px)/1.15 Georgia,serif;letter-spacing:-.03em;margin:2px 0 4px}
.pack-reading .pack-lesson{border:0;border-top:1px solid #dbe4f0;margin:0;padding:0}
.pack-reading .pack-lesson:last-of-type{border-bottom:1px solid #dbe4f0}
.pack-reading summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
  color:#0b1f3a;font:600 16px/1.35 "Source Sans 3",sans-serif;cursor:pointer;min-height:56px;padding:6px 0}
.pack-reading summary::-webkit-details-marker{display:none}
.pack-reading summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid #1d4ed8;
  border-bottom:2px solid #1d4ed8;transform:rotate(45deg);transform-origin:center;transition:transform .22s ease;margin-right:2px}
.pack-reading .pack-lesson[open]>summary::after{transform:rotate(225deg)}
.pack-reading .pack-lesson[open]>summary{color:#1d4ed8}
.pack-reading .pack-lesson>p,.pack-reading .pack-lesson>ul{margin:0 0 14px;font:400 16px/1.55 "Source Sans 3",sans-serif;color:#5a6b82}
.pack-reading .pack-lesson>ul{padding-left:18px}
.pack-reading .pack-subscribe{margin-top:22px;width:auto;min-height:48px;padding:0 22px;font-size:16px}
.pack-reading .idea-subscribe__close{min-height:44px;min-width:44px}

/* Native dialog max-width must not leave a gap on mobile Safari. */
.idea-subscribe [tabindex="-1"]:focus,.idea-subscribe [tabindex="-1"]:focus-visible{outline:none}
@media(max-width:600px){
 .idea-subscribe[open],.idea-subscribe.rocket-info-form[open]{left:0;right:0;width:100%;max-width:100%;min-width:0;margin:0;box-sizing:border-box;max-height:min(90dvh,var(--subscribe-viewport-height,90dvh));bottom:var(--subscribe-viewport-bottom,0px)}
}

/* Las filas llevaban fondo gris Y línea fina a la vez: dos maneras de separar
   lo mismo, y el resultado es que no separa ninguna. Se queda la línea. Y
   «Cerrar» era texto suelto flotando; pasa a ser un control con su caja. */
.pack-reading .pack-lesson{background:none;border-radius:0}
.pack-reading .pack-lesson[open]{background:none}
.pack-reading h2{margin-bottom:14px}
.pack-reading .idea-subscribe__close{border:1px solid #dbe4f0;border-radius:999px;background:#fff;
  padding:0 16px;font:600 15px/1 "Source Sans 3",sans-serif;color:#5a6b82}
.pack-reading .idea-subscribe__close:hover{color:#0b1f3a;border-color:#b9c7dc}

/* ---- La carta, con acabado holográfico ---- */
.idea-card{overflow:hidden;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
 transition:transform .18s ease-out;will-change:transform;
 background:linear-gradient(150deg,#ffffff,#eef3ff 38%,#ffffff 52%,#e8f0ff 68%,#ffffff);
 border:2px solid #9ab6ea;box-shadow:0 18px 44px #0b1f3a1f,inset 0 0 0 1px #ffffff}
.idea-card__brillo{position:absolute;inset:0;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
 background:radial-gradient(180px circle at var(--hx,50%) var(--hy,30%),#8fd7ff66,#b98cff3d 38%,transparent 66%),
 repeating-linear-gradient(115deg,#ffffff00 0 6px,#a9c8ff2e 6px 9px,#ffffff00 9px 16px)}
.idea-card__art{display:block;width:104px;height:104px;margin:0 auto 6px;overflow:visible;
 fill:none;stroke:#1d4ed8;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.idea-card__art .ip-sol{fill:currentColor;opacity:.16}
.idea-card__art .ip-escudo,.idea-card__art .ip-plato{opacity:.85}
.idea-card__art .ip-linea{opacity:.35}
.idea-card .pack-takeaway{margin:16px 0 0;padding-top:14px;border-top:1px solid #ccdaee;color:#526782;font-size:15px}
.idea-card__topic{color:#526782}
.pack-nota{margin:10px 2px 0;font-size:14px;line-height:1.45;color:#526782}
.idea-packs[data-state=revealed]{padding:0;border:0;background:none;box-shadow:none}
.idea-packs[data-state=revealed] .idea-card{padding:26px;border:2px solid #9ab6ea;border-radius:18px;
 background:linear-gradient(150deg,#fff,#eef3ff 38%,#fff 52%,#e8f0ff 68%,#fff);box-shadow:0 18px 44px #0b1f3a1f}
.idea-packs[data-state=revealed] .pack-controls{display:block;border-top:0;padding-top:0;margin-top:14px}
.idea-packs[data-state=revealed] .idea-card__topic{font-size:11px;margin:14px 0 0;text-align:center}
.idea-packs[data-state=revealed] .idea-card h3{text-align:center}
@media (prefers-reduced-motion: reduce){
 .idea-card{transform:none;transition:none}
 .idea-card__brillo{background:none}
}
@media (min-width:700px){.idea-card__art{width:124px;height:124px}}

/* El título recibe el foco al salir la carta para que un lector de pantalla la
   lea, pero eso no debe dibujar un recuadro: nadie navegó hasta ahí con el
   teclado. El anillo vuelve en cuanto alguien sí usa el teclado. */
.idea-card h3:focus,.idea-card h3:focus-visible{outline:none}

/* ---- Que brille de verdad ---- */
.idea-card{padding-top:20px;border-width:3px;
 box-shadow:0 20px 50px #0b1f3a24,inset 0 0 0 2px #ffffff,inset 0 0 26px #b9d4ff4d}
.idea-card:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:conic-gradient(from 210deg,#7cd6ff55,#b98cff55,#ffd28a55,#7ef0c355,#7cd6ff55);
 opacity:.5;mix-blend-mode:multiply;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;padding:5px}
.idea-card__brillo{opacity:.95;
 background:radial-gradient(220px circle at var(--hx,50%) var(--hy,26%),#9fe4ff8c,#c9a4ff5c 40%,transparent 68%),
 repeating-linear-gradient(112deg,#ffffff00 0 5px,#8ec6ff4a 5px 8px,#ffe4a83d 8px 11px,#9df3cc42 11px 14px,#ffffff00 14px 22px)}
.idea-card__brillo:after{content:"";position:absolute;inset:0;border-radius:inherit;
 background:linear-gradient(105deg,transparent 36%,#ffffffcc 47%,#ffffff00 60%);
 transform:translateX(-120%);animation:carta-destello 1150ms cubic-bezier(.22,.7,.3,1) 120ms both}
@keyframes carta-destello{to{transform:translateX(120%)}}
.idea-card__art{filter:drop-shadow(0 4px 10px #1d4ed829)}
.idea-card__topic{letter-spacing:.14em}
@media (prefers-reduced-motion: reduce){
 .idea-card:before{opacity:.35}
 .idea-card__brillo{opacity:.4;background:repeating-linear-gradient(112deg,#ffffff00 0 6px,#8ec6ff33 6px 9px,#ffffff00 9px 18px)}
 .idea-card__brillo:after{animation:none;display:none}
}
/* La rejilla la decide CUÁNTOS mazos hay, no cuántos había el día que se
   escribió esto. Con cuatro la dejé a dos por dos; al volver a tres quedó una
   celda vacía abajo a la derecha, y Gonzalo lo leyó como «falta un sobre».
   Tres van en fila; a partir de cuatro, dos por dos. */
.pack-stage{grid-template-columns:repeat(3,minmax(0,1fr))}
.pack-stage:has(> .idea-pack:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){
  .pack-stage:has(> .idea-pack:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- TRES TEMAS, NUEVE SOBRES ---------- */

/* El carril de temas. Se desliza de lado, con anclaje, para que cada tema pare
   centrado en vez de quedarse a medias. */
.idea-temas{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;padding:2px 0 6px}
.idea-temas::-webkit-scrollbar{display:none}
.idea-tema{scroll-snap-align:center;min-width:0}
.idea-tema__titulo{margin:0;font:400 clamp(21px,4.4vw,27px)/1.15 Georgia,serif;color:#0b1f3a;text-wrap:balance}
.idea-tema__pie{margin:6px 0 16px;font:400 15px/1.45 "Source Sans 3",sans-serif;color:#4a5c75;text-wrap:pretty}
.idea-tema__sobres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;perspective:1000px}
.idea-temas__pista{margin:2px 0 0;text-align:center;font:600 13px/1.3 "Source Sans 3",sans-serif;color:#5a6b82}

/* NUEVE METALES, uno por sobre. La tinta la lleva cada metal: heredarla de un
   sitio comun es como el sobre claro acabo con texto blanco encima. */
.idea-pack[data-metal=oro],.idea-card[data-metal=oro]     {--m-fondo:linear-gradient(118deg,#6f5610,#c19a2e 38%,#f6e29c 43%,#8a6c14);--m-tinta:#221a02;--m-borde:#e8cd74}
.idea-pack[data-metal=cobre],.idea-card[data-metal=cobre]   {--m-fondo:linear-gradient(118deg,#6d3117,#a85c31 38%,#e39f71 43%,#7d3c1e);--m-tinta:#fff;--m-borde:#dd9569}
.idea-pack[data-metal=bronce],.idea-card[data-metal=bronce]  {--m-fondo:linear-gradient(118deg,#4e3912,#856225 38%,#c9a868 43%,#5d4417);--m-tinta:#fff;--m-borde:#bf9d5e}
.idea-pack[data-metal=plata],.idea-card[data-metal=plata]   {--m-fondo:linear-gradient(118deg,#9aa6b4,#dfe6ee 38%,#fbfdff 43%,#aab6c4);--m-tinta:#12203a;--m-borde:#c3ccd8}
.idea-pack[data-metal=acero],.idea-card[data-metal=acero]   {--m-fondo:linear-gradient(118deg,#2e3f55,#546a86 38%,#93a8c2 43%,#36495f);--m-tinta:#fff;--m-borde:#8fa3bc}
.idea-pack[data-metal=peltre],.idea-card[data-metal=peltre]  {--m-fondo:linear-gradient(118deg,#5c6166,#868d94 38%,#bcc3ca 43%,#676d73);--m-tinta:#fff;--m-borde:#b3bac1}
.idea-pack[data-metal=laton],.idea-card[data-metal=laton]   {--m-fondo:linear-gradient(118deg,#6a5a10,#a8912a 38%,#e3d284 43%,#7a6813);--m-tinta:#201c02;--m-borde:#dbc86f}
.idea-pack[data-metal=champan],.idea-card[data-metal=champan] {--m-fondo:linear-gradient(118deg,#8a7a5f,#c6b394 38%,#f0e6d3 43%,#9a8a6c);--m-tinta:#231d10;--m-borde:#d8c9ad}
.idea-pack[data-metal=grafito],.idea-card[data-metal=grafito] {--m-fondo:linear-gradient(118deg,#20242a,#3d444d 38%,#6e7783 43%,#262b31);--m-tinta:#fff;--m-borde:#6b747f}

/* El ojal del sobre toma el color de su metal. */
.idea-pack .idea-pack__art{border-color:currentColor}
.idea-pack .idea-pack__tear{background:var(--m-fondo);filter:brightness(1.12)}
.idea-pack:before,.idea-pack:after{background:repeating-linear-gradient(90deg,#ffffff38 0 1px,transparent 1px 4px)}

/* EL MOMENTO. El elegido crece y sube al foco; los demas se apartan y se
   apagan; y solo entonces se desgarra. Antes elegir y abrir eran el mismo
   instante y no se sentia nada. */
@media(prefers-reduced-motion:no-preference){
  .idea-pack{transition:transform .28s cubic-bezier(.2,.8,.25,1),opacity .28s,filter .28s}
  .idea-pack:hover:not(:disabled){transform:translateY(-8px)}
  [data-state=opening] .idea-pack[data-aparta]{opacity:.06;transform:scale(.8);filter:saturate(.15) blur(2px)}
  [data-state=opening] .idea-tema__titulo,
  [data-state=opening] .idea-tema__pie,
  [data-state=opening] .idea-temas__pista{opacity:.15;transition:opacity .28s}
  .idea-pack--foco,[data-state=opening] .idea-pack[data-picked]{
    z-index:2;animation:pack-foco .66s cubic-bezier(.2,.8,.25,1) forwards;
    box-shadow:0 26px 50px #0b1f3a3a,0 0 0 1px var(--m-borde),0 0 44px 8px #ffffff40;
  }
  /* EL MOMENTO DURA LO QUE DURA UN MOMENTO. Gonzalo: «quiero ver la animacion
     de que se va al frente en el spotlight y de ahi se abre». Medido antes:
     el sobre si crecia y si subia, 286px a 354px, sin recorte ninguno; lo que
     fallaba es que se quedaba arriba 300ms y ya estaba la carta encima. Ahora
     sube mas, se queda mas y los demas se apartan del todo. */
  /* Viaja al centro de la pantalla y crece ahi. --mx y --my los mide el JS en
     el momento de tocar, porque dependen de que sobre tocaste y de donde esta
     el carril en ese scroll. */
  @keyframes pack-foco{
    0%  {transform:none}
    52% {transform:translate(calc(var(--mx,0px) * 1.04),calc(var(--my,0px) * 1.04 - 6px)) scale(1.46)}
    100%{transform:translate(var(--mx,0px),var(--my,0px)) scale(1.4)}
  }
  .idea-pack--foco .idea-pack__tear,[data-state=opening] [data-picked] .idea-pack__tear{animation:pack-tear .52s .72s ease-in forwards}
  .idea-card{animation:card-arrive .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes pack-tear{40%{transform:translateY(-5px) rotate(-5deg)}100%{transform:translate(20px,-65px) rotate(28deg);opacity:0}}
  @keyframes card-arrive{from{opacity:0;transform:translateY(20px) rotateY(-15deg)}to{opacity:1;transform:none}}
}

/* El foco tambien se nota sin movimiento: quien lo desactiva no se queda sin
   saber cual eligio. */
[data-state=opening] .idea-pack[data-aparta]{opacity:.2}
.idea-pack--foco,[data-state=opening] .idea-pack[data-picked]{outline:2px solid var(--m-borde);outline-offset:4px}

/* La carta revelada lleva el metal de su sobre en el canto, no en el fondo:
   el texto largo se lee sobre papel, no sobre metal. */
.idea-card[data-metal]{border-color:var(--m-borde,#789ce1)}

@media(max-width:600px){
  .idea-tema__sobres{gap:7px}
  .idea-pack{min-height:186px;padding:20px 5px 14px;gap:7px;font-size:13px}
  .idea-pack__hint{font-size:11px}
  .idea-pack__seal{font-size:11px;left:7px;top:16px}
}

/* ---------- LA CARA DEL SOBRE ----------
   Gonzalo: «que el texto se pueda leer y sea facil, que se vean bonitos como
   los sobres de Pokemon». Un sobre de verdad se ordena solo: banda dentada
   arriba, el nombre del set pequeno, el dibujo mandando en el centro, y el
   nombre en una BANDA a lo ancho abajo. Antes habia una caja negra flotando
   en mitad del metal con cinco lineas dentro. */
.idea-pack{
  justify-content:flex-start;gap:0;padding:0;overflow:hidden;
  min-height:250px;text-align:center;
}
/* El brillo diagonal del foil, por encima del metal y por debajo del texto. */
.idea-pack__foil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 28%,#ffffff5c 43%,#ffffff26 48%,transparent 62%);
  mix-blend-mode:screen;
}
.idea-pack>*{position:relative;z-index:1}
/* El nombre del tema, arriba, pequeno: es el «set». */
/* El sello es el numero del sobre: decorativo, `aria-hidden`, y no dice nada
   que no diga ya su posicion en la fila. Por eso NO se mide su contraste: no
   hay informacion que perder. Si algun dia dijera algo, hay que darle velo. */
.idea-pack__seal{
  position:absolute;top:7px;left:9px;
  font:700 11px/1 "Source Sans 3",sans-serif;letter-spacing:.06em;
  color:var(--m-tinta);opacity:.6;background:none;padding:0;
}
/* EL DIBUJO MANDA. Deja de ser un aro de decoracion al 42% y pasa a ser lo
   mas grande de la cara, que es lo que hace que un sobre parezca un sobre. */
.idea-pack__art{
  /* LA ILUSTRACION VA EN LA MITAD DEL SOBRE. Medido: pegada abajo su centro
     caia al 69% del alto y se SOLAPABA 6px con la banda del nombre. Gonzalo:
     «la ilustracion que quede un poco mas arriba, como en la mitad del sobre».
     Se ancla al 42% del alto y se centra sobre si misma, asi que el hueco con
     la banda no depende de cuanto mida el nombre. */
  position:absolute;left:50%;top:42%;bottom:auto;transform:translate(-50%,-50%);
  width:84px;height:84px;border:2px solid currentColor;border-radius:50%;
  color:var(--m-tinta);opacity:.55;
  box-shadow:inset 0 0 0 7px #ffffff2e,0 0 0 9px #ffffff1f;
  display:flex;align-items:center;justify-content:center;
}
/* La escena del tema dentro del aro. Hereda currentColor, que ya es la tinta
   del metal, asi que cada sobre la tine de lo suyo sin una regla por metal. */
.idea-pack__escena{display:block;width:76%;height:76%;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.idea-pack__escena .ip-sol{fill:currentColor;opacity:.2}
.idea-pack__escena .ip-linea{opacity:.4}
/* LA BANDA DEL NOMBRE, a lo ancho y pegada abajo. Aqui el par de colores es
   uno solo y no depende del metal, que es lo que hacia ilegibles seis de los
   nueve: un degradado metalico barre del claro al oscuro y ninguna tinta
   aguanta todas las paradas. */
.idea-pack strong{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  min-height:66px;padding:9px 6px 30px;
  /* CRISTAL, NO UN BLOQUE NEGRO. Gonzalo: «ese bloque negro es feo, que sea
     transparente, tipo liquid glass». El desenfoque promedia el metal que hay
     debajo, asi que el fondo deja de ser un degradado con paradas claras y
     oscuras y pasa a ser un color suave y previsible. El canto claro de arriba
     es lo que hace que parezca vidrio y no una capa de pintura.
     El alfa no se elige a ojo: scripts/contraste-banda.cjs recorta la banda de
     los nueve sobres y mide su pixel MAS CLARO, que es el peor caso para una
     letra blanca. */
  background:rgba(9,15,27,.58);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  color:#ffffff;
  font:600 14px/1.2 "Source Sans 3",sans-serif;
  text-wrap:balance;letter-spacing:.005em;
  border-top:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 -8px 20px rgba(0,0,0,.18);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
/* La pista vive DENTRO de la banda, asi que su fondo es el de la banda. Se
   declara igual, y no `none`, para que se pueda medir: un fondo heredado de
   un padre posicionado es justo lo que el medidor no puede ver. */
.idea-pack__hint{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 8px 8px;white-space:nowrap;          /* una linea, siempre */
  background:none;color:#ffffff;                 /* vive DENTRO de la banda */
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  font:700 11px/1.2 "Source Sans 3",sans-serif;letter-spacing:.08em;text-transform:uppercase;
}
.idea-pack__tear{
  position:absolute;inset:0 0 auto;height:16px;border-radius:0;
  background:repeating-linear-gradient(90deg,#ffffff5e 0 2px,#00000021 2px 5px);
}
.idea-pack:before,.idea-pack:after{display:none}
@media(max-width:600px){
  .idea-pack{min-height:214px}
  .idea-pack__art{width:70px;height:70px}
  .idea-pack strong{min-height:62px;font-size:13px;padding:8px 5px 28px}
}

/* ---------- EL MAZO ----------
   Gonzalo: «las cartas deberían salir apiladas, para que leer cada una sea una
   sorpresa, como un mazo, no apiladas así». Antes era un carril donde asomaba
   el canto de la siguiente, o sea que no había sorpresa ninguna; y ademas ni
   eso funcionaba, porque una llave de mas en esta misma hoja se habia comido
   la regla del carril y salian en lista vertical. */
.idea-mazo__caja{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.idea-mazo{position:relative;min-height:var(--alto-mazo,330px)}
.idea-mazo>.idea-card{
  /* La misma altura para todas, la de la mas larga: una carta que asome por
     debajo de la de arriba deja leer su texto y se acaba la sorpresa. */
  position:absolute;inset:0 0 auto;height:var(--alto-mazo,auto);
  overflow:hidden;box-sizing:border-box;
  transform:translateY(calc(var(--d,0) * 12px)) scale(calc(1 - var(--d,0) * .045));
  z-index:calc(20 - var(--d,0));
  transform-origin:50% 100%;
}
/* Las de debajo se apagan un poco: siguen dando la sensación de pila sin
   competir con la que se está leyendo. */
.idea-mazo>.idea-card:not(.idea-card--arriba){filter:brightness(.985)}
.idea-mazo>.idea-card[style*="--d: 3"],
.idea-mazo>.idea-card[style*="--d: 4"],
.idea-mazo>.idea-card[style*="--d: 5"]{opacity:0}
/* La que ya pasó se va del todo: si se quedara detrás, el mazo no menguaría y
   no se notaría que avanzas. */
.idea-mazo>.idea-card--fuera{opacity:0;transform:translate(-120%,-10px) rotate(-12deg)}
.idea-mazo>.idea-card--arriba{
  transform:translate(var(--arrastre,0px),0) rotate(var(--giro,0deg));
  cursor:grab;touch-action:pan-y;
}
.idea-mazo>.idea-card--arriba:active{cursor:grabbing}
.idea-mazo__cuenta{
  margin:0;text-align:center;
  font:600 12px/1.3 "Source Sans 3",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#5a6b82;
}
.idea-mazo__siguiente{align-self:center;min-width:200px}
/* Al acabarse el mazo el primario cambia de destino, no se apaga: se marca con
   un realce en vez de con gris. Un boton gris en el centro de la mirada se lee
   como un error, no como un final. */
.idea-mazo__siguiente--fin{box-shadow:0 0 0 3px rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.28)}
.idea-mazo__secundario{align-self:center;margin-top:2px}
.idea-mazo__secundario[hidden]{display:none}

@media(prefers-reduced-motion:no-preference){
  .idea-mazo>.idea-card{transition:transform .38s cubic-bezier(.2,.8,.25,1),opacity .3s,filter .3s}
  .idea-mazo>.idea-card--arriba{transition:transform .18s ease-out}
  .idea-mazo>.idea-card--vuela{transition:transform .34s ease-in,opacity .3s}
}

/* ---- QUE LOS SOBRES LLAMEN ----
   Gonzalo, después de ver a su hermana usarlo: «no leyó bien la palabra
   "abre"; creo que los sobres tienen que estar pulsando o brillando para que
   los vea y quiera abrirlos».
   El kit prohíbe el parpadeo infinito y permite un barrido de atención de TRES
   pasadas que se para. Un brillo que no para cansa a la tercera vez que pasas
   por la sección, y deja de significar nada. */
@media(prefers-reduced-motion:no-preference){
  /* MEDIDO: el barrido anterior subía el brillo medio del sobre 1,2 de 255.
     Eso no es «se prende», es un reflejo que sólo ve quien ya está mirando el
     sobre. La hermana de Gonzalo lo dijo tal cual: «no se prenden».
     Ahora la banda es ancha y opaca, y además todo el sobre sube de brillo
     durante la pasada: lo que llama la atención por el rabillo del ojo es el
     cambio de la MANCHA entera, no un filo de luz. */
  [data-llama] .idea-pack__foil{
    background:linear-gradient(104deg,transparent 8%,#ffffffd9 34%,#ffffffff 46%,#ffffffd9 58%,transparent 86%);
    background-size:300% 100%;
    animation:pack-brillo 1.25s ease-in-out 3;
  }
  [data-llama] .idea-pack{filter:brightness(1);animation:pack-asoma 1.25s ease-in-out 3, pack-enciende 1.25s ease-in-out 3}
  @keyframes pack-enciende{0%,100%{filter:brightness(1)}46%{filter:brightness(1.42) saturate(1.15)}}
  /* Escalonado: los tres a la vez es un destello; uno detrás de otro se lee
     como «hay tres cosas aquí». */
  [data-llama] .idea-tema__sobres .idea-pack:nth-child(2) .idea-pack__foil{animation-delay:.18s}
  [data-llama] .idea-tema__sobres .idea-pack:nth-child(3) .idea-pack__foil{animation-delay:.36s}
  @keyframes pack-brillo{
    0%  {background-position:150% 0}
    100%{background-position:-50% 0}
  }
  /* Y la banda se levanta un poco en la misma pasada: el brillo dice «mírame»,
     el movimiento dice «esto se toca». */
  [data-llama] .idea-tema__sobres .idea-pack:nth-child(2){animation-delay:.18s}
  [data-llama] .idea-tema__sobres .idea-pack:nth-child(3){animation-delay:.36s}
  @keyframes pack-asoma{
    0%,100%{transform:none}
    48%    {transform:translateY(-5px)}
  }
}

/* «ÁBRELO» SE LEÍA A 11px EN VERSALITAS con tracking, que es justo lo que
   nadie lee. Sube a 13 y se le pone un fondo propio para que no dependa del
   metal que tenga detrás. */
/* MEDIDO: «ÁBRELO» y el nombre estaban los DOS a 13px, y con eso la palabra
   se pierde: «está igualito», dijo ella. Subirlo de 11 a 13 lo igualó al
   nombre en vez de distinguirlo.
   Ahora es más grande que el nombre, va en una pastilla clara sobre la banda
   oscura, y con una flecha: lo que dice «esto se toca» no es el tamaño, es que
   parezca un botón. */
.idea-pack__hint{
  left:50%;right:auto;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - 12px);
  bottom:7px;padding:4px 10px;border-radius:99px;
  background:#ffffff;color:#0c1421;
  font:800 14px/1.15 "Source Sans 3",sans-serif;letter-spacing:.02em;text-transform:none;
  box-shadow:0 1px 0 #00000026;
}
.idea-pack strong{padding-bottom:29px}
/* MÁS ALTOS. Gonzalo, viéndolos en el teléfono: «hay espacio para hacerlos
   más altos». Lo había: entre la fila y la pista quedaban más de 200px vacíos.
   Un sobre alto además se parece más a un sobre y menos a una ficha. */
.idea-pack{min-height:320px}

/* LA PISTA DE DESLIZAR. Gonzalo: «el mensaje de desliza para abrir otro es de
   texto y casi ni se ve, ni me percaté de él. Tiene que tener algo brillante o
   ser un poco más grande para que se note».
   Tenía razón: era gris sobre gris a 15px, a la altura de un pie de foto. Un
   texto suelto en el sitio donde nadie mira no lo lee nadie.
   Ahora es una pastilla con la flecha animada, del color del sitio: lo que
   hace que se note no es el tamaño, es que parezca una cosa y no un renglón. */
.idea-temas__pista{
  margin:14px auto 0;cursor:pointer;width:max-content;max-width:100%;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:99px;
  background:#e7edfd;border:1px solid #c7d6f6;
  font:600 15px/1.25 "Source Sans 3",sans-serif;color:#1d4ed8;
}
.idea-temas__cual{font-weight:800;color:#0b1f3a;white-space:nowrap}
.idea-temas__invita{color:#1d4ed8;display:inline-flex;align-items:center;gap:6px}
.idea-temas__invita:after{content:'→';font-size:17px;line-height:1}
.idea-temas__invita[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  /* La flecha empuja tres veces y para: lo que dice «esto se desliza» es el
     movimiento en la dirección en que hay que deslizar, no la palabra. */
  [data-llama] .idea-temas__invita:after{animation:pista-empuja 1.1s ease-in-out 3}
  @keyframes pista-empuja{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
}

@media(max-width:600px){
  .idea-pack{min-height:286px}
  .idea-pack strong{padding-bottom:27px}
  .idea-pack__hint{font-size:13.5px;padding:4px 9px}
  .idea-temas__pista{font-size:14px;padding:8px 13px;gap:8px}
}


/* ---------- LO QUE MANDA AL FINAL (20-sep) ----------
   Estas tres declaraciones van aqui abajo a proposito. El rediseno de cromo
   entro por arriba del fichero y perdio contra reglas de la misma
   especificidad escritas mas abajo: la chapa seguia clara y el papel blanco.
   Con la cascada, escribir primero es perder. */
.idea-card .rail-boostercard__rarity{
  background:#12203c;color:#dce8ff;border:1px solid var(--m-borde,#789ce1);
}
/* EL ARTE SE VE. Al 13% sobre fondo oscuro no existia: se dibujaba y no se
   distinguia del papel. Sube, y se le da un halo para que sea una presencia y
   no una mancha. */
.idea-card .rail-boostercard__art > svg:first-child{
  opacity:.34;filter:drop-shadow(0 0 22px #6f9dff2e);
  /* CON TINTA CLARA. Estaba dibujado en el azul oscuro de la carta blanca de
     antes: sobre fondo oscuro se pintaba y no se distinguia del papel. Medido,
     no supuesto: el svg estaba ahi, 309x309 y al 30% de opacidad, con el trazo
     en rgb(11,31,58). */
  stroke:#9fc0ff;fill:none;
}
.idea-card .rail-boostercard__art > svg:first-child .ip-sol{fill:#9fc0ff;opacity:.5}
.idea-card .rail-boostercard__art > svg:first-child .ip-linea{opacity:.5}


/* ---------- LA CARTA LLENA SU CASILLA, Y EL ARRASTRE VA PEGADO (20-sep) ----------
   Gonzalo: «no entiendo por que tienen ese espacio muerto blanco, la carta
   deberia ser completa todo eso» y «cuando trato de hacerle drag se traban».

   EL HUECO: la cara quedaba a la altura de su texto -366px dentro de una
   casilla de 422- y esos 56px eran el papel del mazo asomando. Se estira con
   `min-height`, no con `height:100%` ni con `position:absolute`: absoluta saca
   la cara del flujo y entonces `igualar()`, que mide el alto real de cada carta
   para cuadrar el mazo, medía 56px y el mazo entero colapsaba. `min-height` se
   estira cuando hay casilla y desaparece cuando se mide en auto. */
/* EL HUECO SE PINTA DEL COLOR DE LA CARTA. Tres intentos de estirar la cara
   -height:100%, position:absolute y flex:1- y los tres fallaron por la misma
   razon: el alto del mazo vive en un `min-height` medido, y contra eso un
   porcentaje no resuelve; absoluta ademas rompia esa medicion y colapsaba el
   mazo a 56px. Lo que sobraba nunca fue la altura: era que ese sobrante se veia
   BLANCO. Pintando la carta de su propio color, el sobrante deja de existir a
   la vista, que es lo unico que importaba. */
.idea-card.rail-boostercard{
  background:var(--rail-boostercard-paper,#0d1426);
  border-radius:var(--rail-boostercard-radius,14px);
  overflow:hidden;
}
.idea-card .rail-boostercard__box{min-height:100%;display:flex}
/* Y la cara se ESTIRA. Arrastraba un `height:100%` de una version anterior que
   no resuelve contra una caja con min-height, asi que se quedaba a la altura
   de su texto y bloqueaba el estirado del flex. */
.idea-card .rail-boostercard__face{flex:1;height:auto;align-self:stretch}

/* EL ARRASTRE, SIN TRANSICION. La carta lleva una transicion de 0,32s del kit,
   asi que PERSEGUIA al dedo con retardo: eso es lo que se siente como que se
   traba. Y se alza un poco, que es lo que la hace parecer despegada del mazo. */
.idea-mazo>.idea-card--agarrada{
  transition:none;cursor:grabbing;
  transform:translate(var(--arrastre,0px),var(--alzado,0px)) rotate(var(--giro,0deg)) scale(1.02);
  box-shadow:0 26px 46px #0b1f3a3d;
}

/* ---------- LA CARTA ES TODA LA CARTA (20-sep) ----------
   Gonzalo: «no entiendo por qué tienen ese como espacio muerto blanco. La
   carta debería ser completa todo eso».

   Medido: el marco blanco no era un fondo, era el PADDING de 26px del
   componente del kit. La carta es transparente, asi que por ese borde se veia
   el mazo blanco de debajo. Pintarla de otro color no habria servido: lo que
   sobraba era el hueco. La cara ocupa la carta entera y el unico borde que
   queda es el holografico, que si es del diseno. */
.idea-mazo .idea-card.rail-boostercard{padding:0}

/* Y EL BOTON NO VIVE DEBAJO DE LA BARRA.
   Medido en WebKit: «Siguiente carta» acababa en 602px y la barra de abajo
   empieza en 587, o sea 15px por debajo del pulgar. Un boton tapado es un
   boton que no existe. */
.idea-packs [data-pack-result]{padding-bottom:96px}