/* ===========================================================================
   Sistema visual de @ancestra.ar  ·  v1.0.0  ·  21/09/2026

   El bloque de abajo, entre las marcas "generado", LO ESCRIBE UNA MAQUINA:
   sale de marca/tokens.json (la semilla) mezclado con lo que tenga cargado la
   pantalla Marca del panel, siguiendo marca/mapa-css.json. Se rehace con

       python marca/construir.py --escribir

   y se comprueba con `--verificar`, que es lo que corre el test. Editar un
   valor a mano aca no sirve de nada: la proxima corrida lo pisa. Se edita en la
   pantalla Marca, o en tokens.json si es la semilla.

   De la marca para abajo, todo se escribe a mano: son decisiones de composicion
   (que va arriba de que, cuanto respira, cuando se achica un titulo), y eso no
   es un valor que se pueda poner en una fila de una base.

   Esta hoja NO declara @font-face: las tipografias las monta quien la usa
   (carrusel/plantilla.html desde carrusel/fonts/, manual.html desde Google Fonts).

   Todo se escribe en u. 1 u = 1 % del ancho de la lamina = 10,8 px a 1080.
   Para dibujar la lamina a otro tamano alcanza con cambiar --lamina-ancho.
   =========================================================================== */

/* <<< generado desde tokens.json · no se edita a mano >>> */
/* Sistema visual de @ancestra.ar · v1.0.0 */

:root{
  /* --- medida --- */
  --lamina-ancho:1080px;
  --lamina-alto:1350px;
  --u:calc(var(--lamina-ancho) / 100);
  /* --- color del signo --- */
  --brote-signo:#79BD6A;
  --bosque-signo:#2E423A;
  --hueso-signo:#F6F6EA;
  /* --- fondos --- */
  --tinta:#0B1A10;
  --vidrio:rgba(13,26,17,.58);
  --vidrio-solido:#16241A;
  --vidrio-peor:#2A3630;
  --placa:#11201A;
  --papel:#F6F6EA;
  --borde:rgba(255,255,255,.12);
  --borde-claro:rgba(46,66,58,.16);
  /* --- texto --- */
  --hueso:#EDEFE8;
  --hueso2:#C9D1C4;
  --brote:#9FE39A;
  --tinta2:#46504A;
  --bosque:#1E5A3C;
  /* --- dato (validado con el validador de dataviz) --- */
  --dato-superficie:#11201A;
  --dato-unica:#9FE39A;
  --dato-a:#5EA757;
  --dato-b:#9A6A00;
  --dato-seq-1:#9FE39A;
  --dato-seq-2:#5EA757;
  --dato-seq-3:#2C6B45;
  --dato-seq-0:#E4F7E1;
  --dato-ref:#C9D1C4;
  --dato-grilla:rgba(237,239,232,.14);
  --dato-pista:rgba(237,239,232,.07);
  --dato-eje:rgba(237,239,232,.30);
  /* --- tipografia --- */
  --serif:'Newsreader', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --t-mono-xs:calc(var(--u) * 2.04);
  --t-mono-s:calc(var(--u) * 2.22);
  --t-mono-m:calc(var(--u) * 2.41);
  --t-mono-l:calc(var(--u) * 2.78);
  --t-cuerpo-s:calc(var(--u) * 3.52);
  --t-cuerpo-m:calc(var(--u) * 3.89);
  --t-cuerpo-l:calc(var(--u) * 4.26);
  --t-titulo-s:calc(var(--u) * 5.19);
  --t-titulo-m:calc(var(--u) * 7.04);
  --t-titulo-l:calc(var(--u) * 8.89);
  --t-cierre:calc(var(--u) * 10.37);
  --t-dato-l:calc(var(--u) * 16.67);
  --t-dato-xl:calc(var(--u) * 24.07);
  /* --- espacio --- */
  --margen:calc(var(--u) * 5.93);
  --padding:calc(var(--u) * 5.19);
  --gap-xs:calc(var(--u) * 1.3);
  --gap-s:calc(var(--u) * 2.22);
  --gap-m:calc(var(--u) * 2.78);
  --gap-l:calc(var(--u) * 3.33);
  --gap-xl:calc(var(--u) * 4.44);
  /* --- radios --- */
  --r-tarjeta:calc(var(--u) * 2.59);
  --r-plaqueta:calc(var(--u) * 1.67);
  --r-chip:calc(var(--u) * 1.11);
  --r-barra:calc(var(--u) * .37);
  /* --- opacidades --- */
  --op-pie:.62;
  --op-agua:.06;
  --op-textura:.05;
  --op-grano:.045;
  /* --- tratamiento de imagen (el de foto es el que manda por defecto) --- */
  --img-filtro:saturate(.72) contrast(1.06) brightness(.84);
  --img-escala:scale(1.04);
  --img-foco:50% 40%;
  --img-velo:radial-gradient(60% 40% at 15% 12%, rgba(159,227,154,.22), transparent 70%),
    radial-gradient(70% 50% at 50% 112%, rgba(20,60,36,.85), transparent 70%),
    linear-gradient(160deg, rgba(16,38,26,.55) 0%, rgba(8,18,9,.72) 100%);
  /* --- movimiento (vista previa; la lamina es fija) --- */
  --dur-rapido:180ms;
  --dur-medio:420ms;
  --dur-lento:900ms;
  --curva:cubic-bezier(.32,.72,0,1);
  /* --- alias de compatibilidad con la plantilla vieja --- */
  --m:var(--margen);
  --p:var(--padding);
  --radio:var(--r-tarjeta);
}

/* una clase por familia del selector, sobre la lamina entera porque el grano es hermano del fondo, no hijo. La lamina sin clase usa las --img-* de :root, que son las de foto: por eso lo que ya salio no se mueve */
.a-lamina.grabado{
  /* Litografias y laminas botanicas antiguas: papel claro, trazo negro, casi sin color. Si se las trata como una foto quedan blancas y el texto no se lee. Se hunden y se tinen de bosque. */
  --img-filtro:saturate(.18) contrast(1.24) brightness(.46) sepia(.22);
  --img-escala:scale(1.02);
  --img-foco:50% 45%;
  --img-velo:radial-gradient(70% 45% at 20% 10%, rgba(159,227,154,.14), transparent 72%),
    radial-gradient(80% 60% at 50% 110%, rgba(11,26,16,.92), transparent 70%),
    linear-gradient(160deg, rgba(11,26,16,.62) 0%, rgba(6,14,9,.80) 100%);
  --op-grano:.03;
}
.a-lamina.microscopia{
  /* Fluorescencia y tincion vienen con colores que no son de la paleta y que gritan. Se les baja el color y se les sube el negro: lo que tiene que quedar es la forma, no el fucsia del marcador. */
  --img-filtro:saturate(.42) contrast(1.16) brightness(.70) hue-rotate(-12deg);
  --img-escala:scale(1.06);
  --img-foco:50% 50%;
  --img-velo:radial-gradient(60% 40% at 18% 14%, rgba(159,227,154,.20), transparent 70%),
    radial-gradient(74% 52% at 50% 112%, rgba(14,44,26,.88), transparent 70%),
    linear-gradient(160deg, rgba(10,30,20,.50) 0%, rgba(6,16,10,.74) 100%);
  --op-grano:.035;
}
.a-lamina.ilustracion{
  /* Vector y dibujo plano: no tienen grano propio y el contraste ya viene alto. Se toca lo menos posible y se apoya en el velo. */
  --img-filtro:saturate(.58) contrast(1.02) brightness(.86);
  --img-escala:scale(1);
  --img-foco:50% 45%;
  --img-velo:radial-gradient(60% 40% at 15% 12%, rgba(159,227,154,.18), transparent 70%),
    radial-gradient(70% 50% at 50% 112%, rgba(20,60,36,.82), transparent 70%),
    linear-gradient(160deg, rgba(16,38,26,.52) 0%, rgba(8,18,9,.70) 100%);
  --op-grano:.038;
}
.a-lamina.video{
  /* Mismo tratamiento que la foto, pero el filtro no lo aplica el navegador sino ffmpeg antes de subir: la lamina de video se publica ya cocida. */
  --img-filtro:saturate(.72) contrast(1.06) brightness(.84);
  --img-escala:scale(1.04);
  --img-foco:50% 40%;
  --img-velo:radial-gradient(60% 40% at 15% 12%, rgba(159,227,154,.22), transparent 70%),
    radial-gradient(70% 50% at 50% 112%, rgba(20,60,36,.85), transparent 70%),
    linear-gradient(160deg, rgba(16,38,26,.55) 0%, rgba(8,18,9,.72) 100%);
  --op-grano:.045;
}

.a-claro{
  /* la variante clara de las laminas institucionales */
  --vidrio:rgba(246,246,234,.93);
  --borde:transparent;
  --hueso:#0B1A10;
  --hueso2:#46504A;
  --brote:#1E5A3C;
  --dato-superficie:#F6F6EA;
  --dato-unica:#1E5A3C;
  --dato-a:#287B46;
  --dato-b:#B8862B;
  --dato-seq-1:#79BD6A;
  --dato-seq-2:#4A9459;
  --dato-seq-3:#1E5A3C;
  --dato-ref:#9AA79C;
  --dato-grilla:rgba(46,66,58,.14);
  --dato-pista:rgba(46,66,58,.07);
  --dato-eje:rgba(46,66,58,.32);
}
/* <<< fin de lo generado >>> */

/* ===========================================================================
   1. LA LAMINA
   =========================================================================== */
.a-lamina{
  position:relative; width:var(--lamina-ancho); height:var(--lamina-alto);
  overflow:hidden; background:var(--tinta);
  font-family:var(--sans); color:var(--hueso);
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
}

/* --- fondo: foto tratada + velo + grano --------------------------------- */
.a-fondo{position:absolute;inset:0;overflow:hidden;}
/* El filtro, la escala, el encuadre y el velo salen del tratamiento de la marca
   (tokens: `tratamiento`). --foco lo pone cada lamina cuando quiere correr el
   encuadre; si no lo pone, manda el de la familia. */
.a-fondo img,.a-fondo video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--foco,var(--img-foco));
  transform:var(--img-escala);
  filter:var(--img-filtro);
}
.a-fondo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--img-velo);
}
/* el grano va en su propia capa fija, nunca dentro de algo que scrollea */
.a-grano{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  opacity:var(--op-grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:calc(var(--u)*18.5) calc(var(--u)*18.5);
}

/* --- la caja de contenido ----------------------------------------------- */
.a-caja{
  position:absolute;inset:0;padding:var(--margen);
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--gap-m);
}
.a-caja.llena{justify-content:stretch;}
.a-caja.llena > .a-tarjeta{flex:1 1 auto;min-height:0;}
/* La tarjeta de alto natural, arriba o abajo. Es lo que deja ver la foto: con
   `llena` el papel ocupa el 94 % de la lamina y una lamina botanica del siglo
   XVII se ve igual que cualquier otra cosa. Medido el 21/09 sobre los tres
   institucionales. */
.a-caja.alta{justify-content:flex-start;}
.a-caja:not(.llena) > .a-tarjeta{flex:0 1 auto;max-height:100%;overflow:hidden;}

.a-tarjeta{
  position:relative;background:var(--vidrio);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--borde);border-radius:var(--r-tarjeta);
  padding:var(--padding);display:flex;flex-direction:column;gap:var(--gap-m);
}

/* ===========================================================================
   2. TIPOS DE TEXTO
   =========================================================================== */
.a-etiqueta{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:var(--t-mono-m);line-height:1.3;color:var(--brote);
}
.a-titulo{
  font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.012em;
  font-size:var(--t-titulo-l);text-wrap:balance;
}
.a-titulo i{font-style:italic;font-weight:400;color:var(--brote);}
.a-caja.llena .a-titulo{font-size:var(--t-titulo-m);}
.a-bajada{font-size:var(--t-cuerpo-s);line-height:1.35;color:var(--hueso);opacity:.92;max-width:34ch;}
.a-cuerpo{font-size:var(--t-cuerpo-l);line-height:1.38;flex:1 1 auto;max-width:40ch;}
.a-cuerpo p + p{margin-top:var(--gap-s);}
.a-ficha{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.06em;color:var(--hueso2);line-height:1.4;}
.a-abajo{margin-top:auto;}

/* pie de lamina: marca a la izquierda, numero a la derecha */
.a-pie{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:var(--t-mono-xs);letter-spacing:.12em;
  color:rgba(237,239,232,var(--op-pie));
}
.a-pie .a-firma{display:flex;align-items:center;gap:calc(var(--u)*1.2);}
.a-pie .a-firma svg{height:calc(var(--u)*4);width:auto;display:block;}

/* ===========================================================================
   3. MOLDES
   =========================================================================== */

/* --- lista: clave en mono a la izquierda, texto a la derecha ------------- */
.a-lista{list-style:none;display:grid;gap:var(--gap-l);margin:0;padding:0;flex:1 1 auto;align-content:start;}
.a-lista li{display:grid;grid-template-columns:calc(var(--u)*18.5) 1fr;gap:var(--gap-s);align-items:start;}
.a-lista li b{
  font-family:var(--mono);font-weight:500;font-size:var(--t-mono-m);
  letter-spacing:.1em;text-transform:uppercase;color:var(--brote);
  padding-top:calc(var(--u)*.8);line-height:1.3;
}
.a-lista li span{font-size:var(--t-cuerpo-m);line-height:1.36;}
.a-lista li span strong{font-weight:600;color:#fff;}

/* El titulo de la lamina y el elemento que manda no van pegados. El numero de
   260 px arranca con interlinea 0,92 y la cita con 60 px: sin aire entre medio
   los dos se leen como un solo bloque y se pierde la jerarquia que justifica el
   molde. Se vio renderizando el 21/09. */
.a-titulo + .a-dato,
.a-titulo + .a-cita{margin-top:var(--gap-s);}

/* --- dato: un numero solo ------------------------------------------------ */
.a-dato{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;gap:var(--gap-s);}
.a-dato .cifra{
  font-family:var(--serif);font-weight:400;font-size:var(--t-dato-xl);
  line-height:.92;letter-spacing:-.03em;color:var(--brote);
  display:flex;align-items:baseline;gap:calc(var(--u)*1.5);
}
.a-dato .cifra .unidad{font-family:var(--mono);font-size:var(--t-mono-l);letter-spacing:.08em;color:var(--hueso2);}
.a-dato .glosa{font-size:var(--t-cuerpo-l);line-height:1.34;max-width:26ch;}
.a-dato .contra{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.06em;color:var(--hueso2);}

/* --- cita ---------------------------------------------------------------- */
.a-cita{font-family:var(--serif);font-size:calc(var(--u)*5.6);line-height:1.2;letter-spacing:-.01em;flex:1 1 auto;display:flex;align-items:center;}
.a-cita-quien{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.08em;color:var(--brote);text-transform:uppercase;}

/* --- fuente (ultima lamina) ---------------------------------------------- */
.a-fuente-cita{font-size:var(--t-cuerpo-s);line-height:1.42;color:var(--hueso);opacity:.95;}
.a-doi{font-family:var(--mono);font-size:var(--t-mono-m);letter-spacing:.04em;color:var(--brote);word-break:break-all;line-height:1.4;}
.a-cierre{font-family:var(--serif);font-size:var(--t-cierre);line-height:1;letter-spacing:-.02em;margin-top:auto;}
.a-cierre small{
  display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.08em;
  color:var(--hueso2);margin-top:calc(var(--u)*1.7);text-transform:none;
}

/* ===========================================================================
   4. GRAFICOS
   La plaqueta es opaca a proposito: un grafico sobre vidrio no tiene
   superficie conocida, y sin superficie conocida no se puede calcular contraste.
   =========================================================================== */
.a-plaqueta{
  background:var(--dato-superficie);border-radius:var(--r-plaqueta);
  padding:var(--gap-l);display:flex;flex-direction:column;gap:var(--gap-m);flex:1 1 auto;
}
.a-grafico{display:flex;flex-direction:column;gap:var(--gap-m);flex:1 1 auto;justify-content:center;}

/* barras horizontales: el molde de comparacion */
.a-barras{display:grid;gap:var(--gap-m);align-content:center;flex:1 1 auto;}
.a-barra{display:grid;grid-template-columns:calc(var(--u)*17) 1fr calc(var(--u)*9);gap:var(--gap-s);align-items:center;}
.a-barra .rotulo{font-family:var(--mono);font-size:var(--t-mono-l);letter-spacing:.06em;color:var(--hueso2);text-transform:uppercase;line-height:1.2;}
.a-barra .pista{position:relative;height:calc(var(--u)*5.2);background:var(--dato-pista);border-radius:var(--r-barra);}
.a-barra .relleno{
  position:absolute;inset:0 auto 0 0;background:var(--dato-a);
  border-radius:0 var(--r-barra) var(--r-barra) 0;
  box-shadow:0 0 0 2px var(--dato-superficie);
}
.a-barra .valor{
  font-family:var(--mono);font-weight:500;font-size:var(--t-mono-l);
  color:var(--hueso);white-space:nowrap;text-align:right;
}
.a-barra.ref .relleno{background:var(--dato-ref);}
.a-barra.b .relleno{background:var(--dato-b);}
.a-barra.a .relleno{background:var(--dato-a);}
/* series ordenadas (dosis, semanas, etapas): la rampa, no dos colores sueltos */
.a-barra.s1 .relleno{background:var(--dato-seq-1);}
.a-barra.s2 .relleno{background:var(--dato-seq-2);}
.a-barra.s3 .relleno{background:var(--dato-seq-3);}

/* caida de escala: dos puntos unidos por una linea, con el intervalo */
.a-caida{position:relative;flex:1 1 auto;display:block;min-height:calc(var(--u)*42);}
.a-caida svg{width:100%;height:100%;display:block;overflow:visible;}

/* leyenda: solo si hay dos o mas series */
.a-leyenda{display:flex;gap:var(--gap-l);flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-mono-s);color:var(--hueso2);letter-spacing:.06em;}
.a-leyenda span{display:flex;align-items:center;gap:calc(var(--u)*.9);}
.a-leyenda i{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:50%;display:block;font-style:normal;}

/* nota al pie del grafico: la escala, la n y la fuente */
.a-nota{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.05em;color:var(--hueso2);line-height:1.4;}

/* --- linea de tiempo -----------------------------------------------------
   Tres filas de grilla: cuando, el riel con los nodos, y que paso. Nada va
   posicionado a mano, asi dos hitos nunca se pisan por mas que crezca el texto.
   ------------------------------------------------------------------------- */
.a-tiempo{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:var(--gap-l);}
.a-tiempo .rieles{
  /* minmax(0,1fr) y no 1fr: el minimo implicito de una columna de grilla es su
     min-content, asi que una palabra larga ("acompanamiento") ensancha su columna
     y empuja la ultima fuera de la tarjeta. Se vio el 21/09 con cuatro hitos: el
     cuarto quedaba cortado por el borde derecho. */
  display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  row-gap:var(--gap-m);align-items:start;
}
.a-tiempo .cuando{
  grid-row:1;text-align:center;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.08em;text-transform:uppercase;color:var(--brote);
}
.a-tiempo .riel{
  grid-row:2;grid-column:1 / -1;height:2px;background:var(--dato-eje);
  display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));align-items:center;
}
.a-tiempo .riel i{
  justify-self:center;width:calc(var(--u)*1.9);height:calc(var(--u)*1.9);border-radius:50%;
  background:var(--dato-unica);box-shadow:0 0 0 calc(var(--u)*.5) var(--dato-superficie);
}
.a-tiempo .que{
  grid-row:3;text-align:center;padding:0 calc(var(--u)*.8);
  font-size:var(--t-cuerpo-s);line-height:1.28;
  /* La red de contencion, no la solucion: el tope de largo por hito lo pone
     carrusel/moldes.py segun cuantos hitos haya. Esto solo evita que una palabra
     suelta rompa la columna, y `break-word` y no `anywhere` porque `anywhere`
     corta palabras que si entraban. */
  overflow-wrap:break-word;min-width:0;
}
.a-tiempo .cuando{overflow-wrap:break-word;min-width:0;}

/* ===========================================================================
   5. FORMAS DEL SISTEMA
   Salen del logo: la ramificacion, los nodos, la linea que se bifurca y el
   arco de la hoja. Se dibujan con formas.js o se pegan como SVG.
   =========================================================================== */
.a-marca-agua{position:absolute;pointer-events:none;color:var(--hueso);opacity:var(--op-agua);}
.a-marca-agua svg{display:block;width:100%;height:100%;}
.a-textura{position:absolute;inset:0;pointer-events:none;color:var(--brote);opacity:var(--op-textura);}
.a-textura svg{display:block;width:100%;height:100%;}
.a-separador{display:block;width:100%;height:calc(var(--u)*2.4);color:var(--brote);opacity:.45;}
.a-separador svg{display:block;width:100%;height:100%;overflow:visible;}

/* ===========================================================================
   6. VARIANTE CLARA (laminas institucionales)
   =========================================================================== */
/* Los valores de .a-claro los escribe el bloque generado de arriba. Aca queda
   solo lo que no es un valor: que hereda el color del texto y que el titulo va
   en italica. */
.a-claro{color:var(--hueso);}
.a-claro .a-titulo{font-style:italic;}
.a-claro .a-lista li span strong{color:#0B1A10;}
.a-claro .a-pie{color:rgba(237,239,232,var(--op-pie));}
.a-claro .a-plaqueta{border:1px solid var(--borde-claro);}

/* ===========================================================================
   7. FILA DE RETRATOS (lamina de equipo)
   =========================================================================== */
.a-gente{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-l) var(--gap-m);margin-top:calc(var(--u)*.7);}
.a-gente figure{display:grid;gap:var(--gap-xs);justify-items:start;margin:0;}
.a-gente img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-chip);filter:grayscale(1) contrast(1.05);display:block;}
.a-gente figcaption{display:grid;gap:calc(var(--u)*.4);}
.a-gente .n{font-family:var(--serif);font-size:calc(var(--u)*3.15);line-height:1.1;}
.a-gente .r{font-family:var(--mono);font-size:calc(var(--u)*1.76);letter-spacing:.1em;text-transform:uppercase;color:var(--bosque);}

/* ===========================================================================
   8. ALIAS CORTOS
   La plantilla del carrusel usaba estos nombres. Se mantienen apuntando a lo
   mismo para que nada externo se rompa.
   =========================================================================== */
.lamina{ }
.card,.lab,.h,.f,.baja,.texto,.cita,.doi,.cierre,.marca{ }
.card{ background:var(--vidrio);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--borde);border-radius:var(--r-tarjeta);padding:var(--padding);
  display:flex;flex-direction:column;gap:var(--gap-m);position:relative; }